react跨域

一.react跨域

官网链接：https://create-react-app.dev/docs/proxying-api-requests-in-development/

现在市面上的文档都是配置src/setupProxy.js，来源就是官网。

1.npm或cnpm install http-proxy-middleware --save

2.src/setupProxy.js配置

const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function (app) {
    app.use(
        '/api',
        createProxyMiddleware({target: 'https://www.baidu.com/abc/def/', changeOrigin: true,pathRewrite: {'^/api': ''}}))
}

解释：将localhost:3000（或其他端口）/api/xxx的请求代理为https://www.baidu.com/abc/def/xxx

这样域名和端口与请求的url一致就不存在cors问题。

注意1.检验代理配置成功没有，可以将/api换成/，代理所有请求。

2.请求的url前不加baseUrl，这样会默认加localhost：3000，然后走代理流程。

3.检查src/setupProxy.js配置里target配置最后是否有/。

4.postman或其他方法检查后端接口是否可以正常访问。