react17 跨域问题

957 阅读1分钟

方式1

package.json中添加 "proxy": "http://192.168.1.203:8082"

image.png

请求多个地址不支持

方式2

使用http-proxy-middleware

$ yarn add http-proxy-middleware

src目录下创建 setupProxy.js

const { createProxyMiddleware } = require('http-proxy-middleware')
import {Url} from './config/setting';         
module.exports = function(app) {
    app.use(createProxyMiddleware('/api/sliderApi',
        {
            target: Url.PROXY_API_ENDPOINT,    //'http://192.168.1.203:8082'
            changeOrigin:true,
            pathRewrite: {
                "^/api": '/api'
            },
            "secure":true 	//如果访问的是https类的链接,就需要设置为true
        }))
}
 axios.post('/api/traffic/login',data).then(data => {
 
    }).catch(err => {
        console.log("错误信息:", err);
    });

当请求/api/login实际请求接口:“http://192.168.1.203:8082/login”

生产环境nginx解决跨域问题