React中跨域问题的完美解决方案

admin 发布于 REACT

在React开发时如果需要请求接口数据经常会遇到跨域问题,在react中有两种解决跨域的方法

(1)package.json中加上proxy代理配置

在packge.json加入"proxy": "http://www.intewl.com",然后你页面中的请求axios('/api/index/index')就会转发到proxy中的地址也就是真实的请求是http://www.intewl.com/api/index/index,而且也不会有跨域问题。【需要重新启动项目】
(2)使用http-proxy-middleware

首先安装中间件

npm i http-proxy-middleware -S

如何在页面的src目录下新建setupProxy.js文件,并输入对应代码

const proxy = require("http-proxy-middleware");
module.exports = function(app) {
    app.use(
        proxy("/api", {
            target: "http://api.intewl.cn",
            changeOrigin: true
        })
    );
};
使用时
axios('/api/index/index')
//请求等于target+axios地址【http://api.intewl.cn/api/index/index】
.then(res=>{
})
项目重新启动如果提示proxy is not a function,出现问题原因是因为版本问题,http-proxy-middleware的官方文档,发现最新的1.0.0版本已经对模块的引用作了明确的要求

0.x.x版本的引用方式

const proxy = require('http-proxy-middleware');
1.0.0版本的引用方式
const { createProxyMiddleware } = require('http-proxy-middleware');
则对应配置内容做如下修改
const { createProxyMiddleware } = require('http-proxy-middleware');//1.0修改地方
module.exports = function(app) {
    app.use(
        createProxyMiddleware("/api", {//1.0修改地方
            target: "http://api.intewl.cn",
            changeOrigin: true
        })
    );
};
使用时
axios('/api/index/index')
//请求等于target+axios地址【http://api.intewl.cn/api/index/index】
.then(res=>{
})
如果配置项需要自定义对应的域名可以用重写规则实现
const proxy = require("http-proxy-middleware");  //根据版本选择
//const { createProxyMiddleware } = require('http-proxy-middleware');//1.0修改地方
module.exports = function(app) {
    app.use(
        proxy("/api", {
        //createProxyMiddleware("/api", {//1.0修改地方
            target: "http://api.intewl.cn",
            changeOrigin: true,
            pathRewrite:{
                "^/api":""
            }
        })
    );
};
使用时
axios('/api/index/index')
//添加重写规则后,app变成了空字符串,最终的地址为target+"/index/index
 //请求等于target+axios地址【http://api.intewl.cn/index/index】
.then(res=>{
})

(3)修改webpack的配置项

默认creat-react-app创建的项目webpack是不显示的,如果需要修改webpack内容需要先让webpack配置项暴露出来

npm run eject
暴露后打开config目录下的webpackDevServer.config文件,修改proxy对应内容
proxy,//默认值,在public: allowedHost和before(app, server)之间
//修改成如下代码
proxy:{
    "/api", { 
        target: "http://api.intewl.cn",
        changeOrigin: true,
        pathRewrite:{
        "^/api":""
         }
     }
}



243浏览量 · 0评论 · 2020-04-24 02:37:56

全部评论  0

注册登录 进行评论

热门专题

更多专题