前言
跨域是什么在这里就不多说了,主要说怎么配置
Vue跨域推荐文章
步骤
package.json(第一种方式)
"proxy": "http://localhost:4000",//目标地址
缺点:只能写一次,缺乏灵活性
setupProxy.js (第二种方式)
在src目录下新建setupProxy文件(使用CommonJs语法)
// 引入中间件
const proxy = require('http-proxy-middleware')
module.exports = function (app) {
app.use(
proxy('/api', {
target: 'http://localhost:5000', // 目标地址
changeOrigin: true, // 允许跨域
pathReWrite: {
'^/api': ''} // 正则匹配字段,路径重写
})
)
}
配置多个跨域
const proxy = require('http-proxy-middleware')
module.exports = function (app) {
app.use(
proxy('/api', {
target: 'http://localhost:5000',
changeOrigin: true,
pathReWrite: {
'^/api': ''}
}),
proxy('/api', {
target: 'http://localhost:8000',
changeOrigin: true,
pathReWrite: {
'^/api': ''}
})
)
}