React跨域解决方案

什么是跨域？

跨域是由浏览器的同源策略限制导致的。同源策略用于限制一个源的 JavaScript 脚本和另一个源的资源进行交互。它能帮助阻隔恶意文档，减少可能被攻击的媒介。

同源就是两个 URL 的协议、主机、端口号都相同时，它们两个 URL 就是同源。

URL URL 是否同源 结果
http://www.dev.com http://www.dev.com/index.html 同源 协议、域名、端口号相同，只是路径不同
http://www.dev.com https://www.dev.com 不同源 协议不同
http://www.dev.com:80 http://www.dev.com:9000 不同源 端口号不同
http://www.dev.com http://www.test.com 不同源 主机不同

非同源限制

  • 无法读取 Cookie、LocalStorage 和 IndexedDB
  • 无法获取 DOM
  • 无法发送 AJAX 请求

跨域解决方法

https://github.com/facebook/create-react-app/blob/master/docusaurus/docs/proxying-api-requests-in-development.md

package.json

在 package.json 中添加 proxy

“proxy”: “https://qifu.baidu.com"

1
fetch("/api/sme/aladdin/ip/retrieve", {
2
  method: "POST",
3
  body: JSON.stringify({ ip: "222.211.34.54" }),
4
  headers: new Headers({
5
    "Content-Type": "application/json",
6
  }),
7
})
8
  .then((res) => {
9
    console.log(res.json());
10
  })
11
  .catch((error) => {
12
    console.log(error);
13
  });

中间件代理 http-proxy-middleware

安装 http-proxy-middleware

yarn add http-proxy-middleware

创建文件 src/setupProxy.js，编辑为

1
const { createProxyMiddleware } = require("http-proxy-middleware");
2
3
module.exports = function (app) {
4
  app.use(
5
    "/api",
6
    createProxyMiddleware({
7
      target: "https://qifu.baidu.com",
8
      changeOrigin: true,
9
    })
10
  );
11
};
1
fetch("/api/sme/aladdin/ip/retrieve", {
2
  method: "POST",
3
  body: JSON.stringify({ ip: "222.211.34.54" }),
4
  headers: new Headers({
5
    "Content-Type": "application/json",
6
  }),
7
})
8
  .then((res) => {
9
    console.log(res);
10
  })
11
  .catch((error) => {
12
    console.log(error);
13
  });
React
React 跨域

本博客所有文章除特别声明外，均采用 CC BY-SA 4.0 协议 ，转载请注明出处！