vue项目中常见的跨域问题解决

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了vue项目中常见的跨域问题解决，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2095字，纯文字阅读大概需要3分钟。

内容图文

问题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();
  ... 
}

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

内容总结

以上是互联网集市为您收集整理的vue项目中常见的跨域问题解决全部内容，希望文章能够帮你解决vue项目中常见的跨域问题解决所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

---