vue前後端分離開發解決跨域的問題

開發時配置

vue.config.js

解決跨域

module.exports = {
    devServer: {
        port: 8080,
        host: "0.0.0.0",
        https: false,  // 協定
        open: true,  // false 啟動服務時自動打開浏覽器通路
        proxy: {
            '/admin': {
                target: "http://admin.caorulai.com",
                changOrigin: true,  // 是否要代理
                pathRewrite: {
                    '^/admin': '/'
                }
            }
        }
    },
    publicPath: "./",
    outputDir: "dist",
    assetsDir: "static",
    indexPath: "index.html"
}
           

開發完畢部署到

Nginx

伺服器，則配置反向代理

location /admin/ {
	proxy_set_header Host $proxy_host;
	proxy_set_header  X-Real-IP        $remote_addr;
	proxy_set_header  X-Forwarded-For  $proxy_add_x_forwarded_for;
	proxy_set_header X-NginX-Proxy true;
	proxy_pass 'http://admin.caorulai.com/';
}
           

如果後端服務有字首，如

http://admin.caorulai.com/admin/account/login

，則配置如下

location /admin/ {
	proxy_set_header Host $proxy_host;
	proxy_set_header  X-Real-IP        $remote_addr;
	proxy_set_header  X-Forwarded-For  $proxy_add_x_forwarded_for;
	proxy_set_header X-NginX-Proxy true;
	proxy_pass 'http://admin.caorulai.com';
}