Vue 跨域问题解决办法 Vue 配置防止跨域 nginx 重定向防止跨域

前后端分离不可避免会遇到跨域问题,可把我烦的想砍人,现在总结几个解决办法让后人不走歪路

环境:
Vue-cli 4x

本地开发跨域问题 - 配置devServer

  1. 打开根目录的vue.config.js(没有则创建,vue以前的版本有的是写在config/index.js,有的写在webpack.config.js,4x版本统一在vue.config.js),写入:
    module.exports = {
     devServer:{
     host: 'localhost', // Vue开发项目启动域名
       port: 8080, // 端口
       https: false, // 是否是https
       open:false,
       proxy:{
             '/apiDev':{
                 target: 'http://api.zmxy.com', // 后端API
                   changeOrigin: true,
                   pathRewrite:{
                         '^/apiDev':'' // 以apiDev作为前缀
                   }
             }
         }
     }
    }
  2. npm run serve 重新编译项目,以apiDev开头的URL就会自动转发到api.zmxy.com
    axios使用:
    this.axios.
     get('/apiDev/index/index/getDetail',{
         params: {id:id}
     })

Nginx重定向转发防止跨域

  1. 编辑Nginx配置文件
    location /api {
    rewrite  ^.+api/?(.*)$ /$1 break; //可选参数,正则验证地址
    include  uwsgi_params; //可选参数,uwsgi是服务器和服务端应用程序的通信协议,规定了怎么把请求转发给应用程序和返回
    proxy_pass   https://www.api.com; // 此处修改为自己的请求地址,必填
    }
  2. 重启Nginx
    axios使用:
    this.axios.
     get('/api/index/index/getDetail',{
         params: {id:id}
     })
vue
本作品采用《CC 协议》,转载必须注明作者和本文链接
讨论数量: 0
(= ̄ω ̄=)··· 暂无内容!

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容,与人为善,比聪明更重要!