前端跨域问题的解决方案
前后端分离模式开发时,跨域是必须处理的问题,以下是我对前端跨域的总结:
使用Vue开发的项目,在vue.config.js里配置如下:
module.exports = {
devServer: {
port: '8080',//端口号配置
open: true,//启动服务后自动打开浏览器
proxy: {
'/api': {
target: 'http://127.0.0.1:5000',//目标服务器
changeOrigin: true,
pathRewrite: {'^/api': ''}
}
}
}
}
使用React开发的项目
1.可以在package.json里配置一个代理
"proxy":"http://localhost:5000"
2.配置多个代理
在src 文件下 新建 setupProxy.js 文件
const proxy = require("http-proxy-middleware")
module.exports = function(app){
app.use(
proxy("/api1",{//遇见/api1前缀的请求,就会触发该代理配置
target:"http://localhost:5000",//请求转发给谁
changeOrigin:true,//控制服务器收到的请求头中Host字段的值
pathRewrite:{"^/api1":""},//重写请求路径(必须)
}),
proxy("/api2",{
target:"http://localhost:5001",
changeOrigin:true,
pathRewrite:{"^/api2":""},
})
)
}
注意:如果 http-proxy-middleware 的版本是 1.x 以上时,需要解构出createProxyMiddleware来代替proxy,如下:
const {createProxyMiddleware} = require("http-proxy-middleware")
module.exports = function(app){
app.use(
createProxyMiddleware("/api1",{//遇见/api1前缀的请求,就会触发该代理配置
target:"http://localhost:5000",//请求转发给谁
changeOrigin:true,//控制服务器收到的请求头中Host字段的值
pathRewrite:{"^/api1":""},//重写请求路径(必须)
}),
createProxyMiddleware("/api2",{
target:"http://localhost:5001",
changeOrigin:true,
pathRewrite:{"^/api2":""},
})
)
}
使用Vite + Vue/React 的项目
在vite.config.js里的配置如下:
export default defineConfig({
server:{
open: true, // 是否自动打开浏览器
port: "8080", // 端口号
proxy: {
'/api': {
target: 'http://127.0.0.1:3000', // 接口源地址
changeOrigin: true, // 开启跨域
rewrite: (path => {
return path.replace('^/api', '')
})
}
}
}
})