【部署】前后端分离项目的跨域问题-CSDN博客

本文链接：https://blog.csdn.net/Hsk_03/article/details/126664298

跨域问题

方式一前端项目中设置proxy。

注意，此方法在打包部署时不管用

最近一段时间因为上海疫情封禁在家里，无聊看了下前端，跟着哔哩哔哩手敲了一遍”云易办“项目，于是使用了在前端部署 proxy 的方式进行跨域，相关代码如下：

vue/vue.config.js

let proxyObj={}

proxyObj['/']={
    ws:false,

    // 目标地址
    target:'http://127.0.0.1:8081',

    // 发送请求头 host 会被改成 target
    changeOrigin:true,

    //不重写请求地址
    pathRewrite: {
        '^/': '/'
    }
}


module.exports={
    devServer:{
        host:'localhost',
        port:8080,
        proxy: proxyObj
    },
    lintOnSave: false,
    publicPath:'./'
}

代码运行很成功，由于我是先写的后端代码，(感觉同时运行一个IDEA 后端和一个 WebStorm 有点吃力)于是我就将后端打成 jar 包后放在了自己的服务器(腾讯云 CentOS8)，并且将 target 修改为我的服务器地址，运行很流畅，一点问题都没有。

但是！在我完成前端代码，npm run build生成 dist 文件后，我将 dist 部署到服务器出现了一定的问题：所有的接口全部 404 了，在浏览器中查看 NetWork 的 URL 发现跨域失效了，又变成了自己的端口，因此查询资料(顺便入门了下 Nginx)后，我采用了方法二解决了这一问题。

方法二使用 Nginx 跨域

请先看完：在 b 站的视频中，有一句话我印象很深刻，那就是设置四种基本请求的时候，老师多写了一个 base(代码如下)并且说在企业中很可能会让你突然加一个基本地址那就很难办。

let base = '';
export const postRequest=(url,params)=>{
    return axios({
        method: 'post',
        url:base+url,
        data:params
    })
}

export const putRequest=(url,params)=>{
    return axios({
        method:'put',
        url:base+url,
        data:params
    })
}

起初一直没搞懂这个 base 的用途，后来发现，原来是部署的时候有大用。

开始操作

首先我们将这个 base 一个值，我这里让他叫做/baseproxy，如下：

let base = '/baseproxy';

部署保存后，我们访问地址的路径前面就会多上这样一个字符串，如下图所示：

// 我们访问一下'/login'(假使前端项目跑在 8081 端口)

// 没加之前
http://localhost:8081/login

// 加了之后
http://localhost:8081/baseproxy/login

可以看到加了之后多了一个基本地址，这个时候我们只要在 nginx 的配置文件中设置一下代理，让跳转/baseproxy的访问全部都跳转到另一个地方。

我们可以在 server 中加一个 location，如下：

location /baseurl{
	proxy_set_header Host $http_host;
	proxy_set_header X-Real-IP $remote_addr;
	proxy_set_header REMOTE-HOST $remote_addr;
	proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
	// proxy_pass http://IP 地址:端口号/;
  proxy_pass http://110.40.191.51:8081/;
}

完成后的效果

加完之后，整端 server 代码如下：

server{
  listen 8080;
  server_name yeb;
  location / {
    root /home/www/dist;
    index index.html index.html;
  }

  location /baseproxy/ {
    proxy_set_header Host $http_host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header REMOTE-HOST $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_pass http://后端IP地址:端口号/;
  }
  error_page   500 502 503 504  /50x.html;
  location = /50x.html {
  root   html;
}

}