react 、vue 跨域

何为跨域：当当前页面地址的协议、域名、端口三者之间任意一个与请求地址的不同即为跨域

当前页面地址	被请求的地址	是否跨域	原因
http://www.hxhshr.com:8080/	http://www.hxhshr.com:8080/login	否	同源（协议/域名/端口号相同）
http://www.hxhshr.com:8080/	https://www.hxhshr.com:8080/	跨域	协议不同(http/https)
http://www.hxhshr.com:8080/	http://bbb.hxhshr.com:8080/	跨域	域名不同(www/bbb)
http://www.hxhshr.com:8080/	http://www.hxhshr.cn:8080/	跨域	域名不同(com/cn)
http://www.hxhshr.com:8080/	http://www.bbb.com:8080/	跨域	域名不同(hxhshr/bbb)
http://www.hxhshr.com:8080/	http://www.hxhshr.com:8081/	跨域	端口号不同(8080/8081)

解决跨域方法1：http-proxy-middleware中间件

前提：

//新版node中-save参数可以省略不写
npm i http-proxy-middleware

第一步：在src目录下新建setupProxy.js文件（文件名称必须是这个）

然后写入

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

module.exports = function (app) {
    app.use(
        //第一个代理
        createProxyMiddleware("/api", {// 这个"/api"参数告诉你只要请求地址是以/api开头的就使用这个代理，将把当前地址修改为http://localhost服务器地址
            target: "http://localhost", //服务器地址1
            changeOrigin: true,//是否开启跨域
            logLevel: "debug",//打印
            pathRewrite: { "^/api": "" },//
        }),
        //第二个代理
        createProxyMiddleware("/apq", {
            target: "http://localhost:8080",//服务器地址2
            changeOrigin: true,
            pathRewrite: { "^/apq": "" },
        })
    );
};

配置说明：我这个文件可以代理多个，这就为以后项目做大了，有很多台服务器做准备，一个createProxyMiddleware是一个代理，app相当于工厂，createProxyMiddleware是工厂里的房子。

当然配置多个代理你可以用多个工厂，一个工厂一个房子也行，只不过有点浪费，比如：

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

module.exports = function (app) {
    //第一个代理工厂
    app.use(
        createProxyMiddleware("/api", {
            target: "http://localhost", 
            changeOrigin: true, 
            logLevel: "debug",
            pathRewrite: { "^/api": "" }, //重写路径(old path, new path)，把路径中的/api换成空
        })
    );
    //第一个代理工厂
    app.use(
        createProxyMiddleware("/apq", {
            target: "http://localhost:8080", 
            changeOrigin: true, 
            logLevel: "debug",
            pathRewrite: { "^/apq": "" }, 
        })
    );
};

第二步：发送请求（利用axios）

前提下载axios

npm i axios

记得要文件引入axios import axios from "axios";

//对应上面的第一个代理
axios.get("/api/findUsers").then(
//咱发送的请求开头是/api，所以第一个代理检测到/api后就开始
//做代理把原来的协议、域名、端口统统换为http://localhost，
//目前地址相当于http://localhost/api/findUsers，然后第一个
//代理又重写了路径，把路径中的/api换成空，所以最终请求路径
//相当于http://localhost/findUsers。完成跨域
    (res) => {
        console.log(res);
    },
    (err) => {
        console.log(err);
    }
);
//对应上面的第二个代理
axios.get("/apq/findUsers1").then(
    (res) => {
        console.log(res);
    },
    (err) => {
        console.log(err);
    }
);