解决VUE和React跨域（添加代理）

VUE和React解决跨域（添加代理）

同源策略（Same origin policy）是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。
前端在开发的时候，经常会遇到不是一个跨域问题。
协议（http、https，ws） 域名（ip） 端口（3000）只有有一个不一样就会出现跨域。

那么我们在VUE中怎么解决跨域？

VUE解决跨域（添加代理）

首先我们在与node_modules同级的地方新建一个vue.config.js
注意：一定是要与node_modules同级的地方！！
目录结构如下：
在vue.config.js中写入

module.exports={
    devServer:{
    //代理
        proxy:'http://abc.com';//要访问的地址
        //如果是本地
        //proxy：http//localhost：;//要访问的本地ip
    }
}

解决完跨域后，直接写要访问地址后面的地址即可

react中解决跨域

react解决单个跨域

废话不多说，直接上代码

"proxy": "http://baojia.chelun.com/"

package.json中添加"proxy":“http//localhost：7001”，axios中地址就不用写http//localhost：7001，直接写http//localhost：7001后面的地址

react解决多个跨域

react进行更新之后，之前的proxy后面直接写对象的形式不可以了，proxy后只能写成String的形式。
解决方法：
1、创建一个必须叫setupProxy的文件（名称必须为setupProxy）
2、下载http-proxy-middleware的插件

npm i http-proxy-middleware -S

最后在setupProxy文件中写入以下代码

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

module.exports=function(app){
    app.use(
        createProxyMiddleware('/api',{//api是需要转发的请求，就是请求的接口地址
            target:'http://localhost:8000',//这里是接口服务器地址
            changeOrigin:true,//允许跨域
            pathRewrite:{'^/api':''}//忽略api路径
        })
    ),
    //多个地址就写多个app.use就好了
    app.use(
        createProxyMiddleware('/abc',{
            target:'http://localhost:8080',
            changeOrigin:true,//允许跨域
            pathRewrite:{'^/abc':''}//忽略abc路径
        })
    )
}

第一次写博客，有不足的地方多多关照，来了就留下个关注吧！