React代理请求解决跨域问题

绝地灬酷狼 2022-04-24 16:30 380阅读 0赞

假设下面的常量存放的地址是我们请求的地址  
const endPointURI = ‘[https://08ad1pao69.execute-api.us-east-1.amazonaws.com/dev/random\_joke][https_08ad1pao69.execute-api.us-east-1.amazonaws.com_dev_random_joke]’;

这里我们直接调用了一个「非本地」地址。在实际开发中是比较罕见的。这样也可以成功，是因为被调用的 API 做了额外的人为设置，允许一个「非同域」的 ajax 请求。跨域资源共享 CORS 涉及的知识点比较多。我们这里做简单的介绍，目的是让你知道如何在本地开发服务器上增加代理请求的功能。

我们在浏览器中看到的页面是从一个本地开发服务器所伺服的。这个本地开发服务器的地址就是 [http://localhost:8000/][http_localhost_8000] 。当我们调用 getRandomPuzzle 时，此时发送 ajax 请求页面的域就是 [http://localhost:8000][http_localhost_8000 1]，但是请求的数据在另外一台服务器 [https://08ad1pao69.execute-api.us-east-1.amazonaws.com][https_08ad1pao69.execute-api.us-east-1.amazonaws.com]。一个是 http 一个是 https，路径也不同，端口也不同（https 是 443）。任意这三个东西有一个不同，就认为是资源请求「跨域」了。http 的 默认 安全规则是不允许「跨域」请求。

值得注意的是，发送 ajax 请求的是你的浏览器，所谓 User Agent，而「跨域」的限制 仅仅在浏览器和服务器之间。我们不能强制远程服务器都像例子中那样允许「跨域」请求，所以我们能做的就是不要使用浏览器发送请求。所以在前端开发中，一种常见的规避跨域的方法就是：把 ajax 请求发送到你的本地开发服务器，然后本地开发服务器再把 ajax 请求转发到远端去，从网络拓扑上看本地开发服务器起着「反向代理」的作用。本地服务器和远端服务器是「服务器和服务器间的通信」，就不存在跨域问题了。

配置代理也很简单，只需要您在配置文件 config/config.js 中与 routes 同级处增加 proxy 字段，代码如下，

routes: \[  
// …  
\],

*  proxy: \{
 *  ‘/dev’: \{
 *      target: 'https://08ad1pao69.execute-api.us-east-1.amazonaws.com',
 *      changeOrigin: true,
 *  \},
 *  \},

配置的含义是：去往本地服务器 localhost:8000 的 ajax 调用中，如果是以 /dev 开头的，那么就转发到远端的 [https://08ad1pao69.execute-api.us-east-1.amazonaws.com][https_08ad1pao69.execute-api.us-east-1.amazonaws.com] 服务器当中，/dev 也会保留在转发地址中。

比如：

/dev/random\_joke 就会被转发到 [https://08ad1pao69.execute-api.us-east-1.amazonaws.com/dev/random\_joke。][https_08ad1pao69.execute-api.us-east-1.amazonaws.com_dev_random_joke 1]

所以 end point URI 也需更改为：

const endPointURI = ‘/dev/random\_joke’;

[https_08ad1pao69.execute-api.us-east-1.amazonaws.com_dev_random_joke]: https://08ad1pao69.execute-api.us-east-1.amazonaws.com/dev/random_joke
[http_localhost_8000]: http://localhost:8000/
[http_localhost_8000 1]: http://localhost:8000
[https_08ad1pao69.execute-api.us-east-1.amazonaws.com]: https://08ad1pao69.execute-api.us-east-1.amazonaws.com
[https_08ad1pao69.execute-api.us-east-1.amazonaws.com_dev_random_joke 1]: https://08ad1pao69.execute-api.us-east-1.amazonaws.com/dev/random_joke%E3%80%82