问题1:开发过程中vue项目实现跨域访问的方式

解决方案：

1. 在项目根目录下新建vue.config.js文件，添加如下配置：

module.exports = {
    devServer: {
        disableHostCheck: true,
        //解决跨域问题
        proxy: {
            "/api": {
                target: "http://localhost:8088/server",
                changeOrigin: true,
                pathRewrite: {
                    "^/api": ""
                }
            }
        }
    },
}

2. 配置axios的baseUrl参数

Vue.prototype.axios.defaults.baseURL = "/api";

这样所有的跨域请求，如：http://localhost:8088/server/XXX都通过代理的方式转换为：http://localhost:8080/api/XXX，实际上是把跨域转换为不跨域。

但是这种方案只适用于开发过程中，项目打包部署后，项目中配置的代理将失效。需要使用nginx反向代理将所有的/api请求映射到http://localhost:8088/server上实现

问题2:vue项目打包部署后的跨域访问问题

解决方案：通过配置nginx代理解决，nginx主要配置如下：

server {
    	   #监听80端口
        listen 80;
        #服务名称
        server_name localhost;
        #反向代理，location越靠前优先级越高，所以此项配置必须放在location /之前，否则会失效
        location /api {
        	  #被代理路径，只能是域名或ip：port形式，以/结尾表示用/替换掉/api
            proxy_pass	http://127.0.0.1:8088;
            #重写url路径，把/api修改为/dlcsh/server/，其他不变$1表示前边（）中的分组
            rewrite		^/api/(.*)$ /server/$1 break;
        }
        location / {
            #vue项目路径
            root   /app/web/dist;
            index  index.php index.html index.htm;
        }
}

重启nginx服务后可通过网络访问。后端项目部署在：127.0.0.1:8088上。另附nginx主要命令

#重新加载特定的nginx配置文件
./nginx -s reload -c /app/nginx/nginx.conf
#关闭nginx服务
./nginx -s stop
#重启nginx服务
./nginx -s reopen
#处理完所有请求后关闭nginx服务
./nginx -s quit 

问题3:通过electron-builder打包后跨域访问失效问题的解决

对基于electron-builder插件创建的桌面应用，所有的页面访问都被影射到了文件上，所以配置中的/api访问都会映射到文件上，对vue的网络代理将失效。解决这一问题可以使用electron的方式实现跨域请求，解决方案如下：

1. 修改axios模块的baseUrl属性为真实的url地址

Vue.prototype.axios.defaults.baseURL = "http://localhost:8088/server";

2. 在electron主启动类（我的是background.js文件）中关闭web权限检查

async function createWindow() {
  const win = new BrowserWindow({
    ...
    webPreferences: {
      ...
      //关闭web权限检查，允许跨域
      webSecurity: false
    }
  })
  //打包后开启控制台
  //win.webContents.openDevTools();
  ... 
}

重新打包项目后即可正常访问。

原创文章，欢迎