Vue.js 跨域问题

Vue 解决跨域问题？

为什么会产生跨域问题？

由于浏览器的同源机制。当前页面访问的域名，协议，端口号有一个不一致就会导致跨域。

CORS（跨域资源共享） 服务端更改header

header('Access-Control-Allow-Origin:*');//允许所有来源访问 

header('Access-Control-Allow-Method:POST,GET');//允许访问的方式 

用JQuery提供的jsonp

// 安装依赖
npm install jquery --save-dev

//在webpack.base.conf.js文件中加入
plugins: [
    new webpack.ProvidePlugin({
        $: "jquery",
        jQuery: "jquery"
    })
 ],
 
 // 在需要的temple里引入也可以在main.js里全局引入
 import $ from 'jquery'
 
 // eg:
 
methods: { 
  getData () { 
    var self = this 
    $.ajax({ 
      url: 'http://x.xxx.cn/index.json', 
      type: 'GET', 
      dataType: 'JSONP', 
      success: function (res) { 
        self.data = res.data 
      } 
    }) 
  } 
} 

使用http-proxy-middleware 代理解决（项目使用vue-cli脚手架搭建）

1. 打开config/index.js,在proxyTable中添写如下代码:

proxyTable: { 
  '/api': {  //是后端API子路径
    target: 'http://f.apiplus.cn', //API域名 
    changeOrigin: true, //是否改变原域名
    "secure": false,
    "logLevel": "debug" 
  } 
}

2）在 package.json 文件中修改启动指令：

"scripts": {
    "ng": "ng",
    "start": "ng serve --dev --proxy-config proxy.conf.json",
    ...
  },

新增启动参数 --proxy-config，指定为刚刚创建的文件。这里使用代理文件配置的代理启动。

3. 使用axios请求数据时直接使用“/api”：

getData () { 
 axios.get('/api/xxxx', function (res) { 
   console.log(res) 
 })

生产环境修改

开发环境开发已完成，部署到服务器时，就没有vue-cli脚手架的辅助了，生产环境需要用到Nginx的反向代理

• 下载Nginx，配置nginx的文件

location/api {
   rewrite ^.+api/?(.*)$/$1 break;
   include uwsgi_params;
   proxy_pass http://www.xxx.cn:111;//此处修改为自己的请求地址
}

• 把dist的前端资源放到html文件夹，就可以了