什么是跨域?
首先分析一个url:
http://www.exmple.com:3000/path/to/test.html?key1=value1&key2=value2#SomewhereInTheDocument
其中:http://
属于协议,
www.example.com
属于域名,
:3000
属于端口,
/path/to/test.html
属于请求路径,
?key1=value1&key2=value2
属于请求参数,
#SomewhereInTheDocument
属于锚点。
只要协议、域名、端口三者中,有一个及以上不一致时,就属于跨域
如何用proxy代理解决跨域问题
首先安装http-proxy-middleware,在终端执行如下命令
npm install http-proxy-middleware
在项目的根目录下创建setupProxy.js文件,并在其中配置:
//引入需要用到的模块
const { createProxyMiddleware } = require("http-proxy-middleware");
module.exports = function (app) {
// proxy第一个参数为要代理的路由
app.use(createProxyMiddleware("/api1", {
target: "https://www.baisu.com ",//配置你要请求的服务器地址,代理后的请求网址
pathRewrite: {'^/api1': ''},//路径重写
changeOrigin: true,//是否改变请求头
})),
app.use(createProxyMiddleware("/api2", {
target: "https://sp0.baidu.com", //配置你要请求的服务器地址,代理后的请求网址
pathRewrite: {'^/api2': ''}, //路径重写
changeOrigin: true, // 是否改变请求头
}))
//如果有更多的url,也同理
};
最后只要在需要用到的地方把请求的服务器地址都替换成/api1就行了(以get为例)
axiox.get('/api1').then(res => {
console.log(res);
})
最后,记住一定要重新启动服务器,否则不会生效