React跨域

方案一

package.json配置：

"proxy": "http://www.zhangxuwei.top/"    // 注意，目前最新版本不支持对象

属于服务器代理。

 

方案二

使用中间件 http-proxy-middleware

安装：

npm install http-proxy-middleware -d

新建 src/setupProxy.js

const proxys = require('http-proxy-middleware')

const proxy = proxys.createProxyMiddleware;    // 最新版需要

module.exports = function (app) {
    // proxy第一个参数为要代理的路由
    // 第二参数中target为代理后的请求网址，changeOrigin是否改变请求头，其他参数请看官网
    app.use(proxy('/api', {
        target: 'http://www.zhangxuwei.top/',
        changeOrigin: true
    }))
}

重启项目即可。

属于服务器代理。

 

方案三

将谷歌浏览器设置为可跨域。

最简单，从根本上解决，一劳永逸。
在谷歌启动图标的路径属性后添加以下属性，定义个人浏览器，开启允许跨域。

--args --disable-web-security --user-data-dir

 

方案四

HBuilderX 的内置浏览器是允许跨域的，所以我们可以使用 HBuilderX 内置浏览器进行测试预览。

 

方案五

从服务器端允许跨域，服务端开启 CORS（Cross-Origin Resource Sharing 跨域资源分享）