前后端分离项目的跨域问题解决方案分享

跨域问题是前后端分离项目的典型问题之一，前端采用vue-cli新建的项目运用接口代理来实现跨域处理

一、在vue项目中config/index.js文件中

module.exports = {
  dev: {

    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {
      '/api': {
        target: 'https://api.demo.com/api', //代理域名
        changeOrigin: true,//是否改变源
        pathRewrite: {
          '^/api': '/' //路径重写
        }
      }
    },

二、后台更改header

    header('Access-Control-Allow-Origin:*'); // '*'代表允许所有域名访问
    // header('Access-Control-Allow-WithCredentials:true');
    // 响应类型
    header('Access-Control-Allow-Methods:*'); //  '*'代表允许所有请求方式访问
    // 响应头设置
    header('Access-Control-Allow-Headers:x-requested-with,content-type');

三、使用JQuery提供的jsonp (注：vue中引入jquery，自行百度)

methods: { 
  getData () { 
    var that= this 
    $.ajax({ 
      url: 'https://api.demo.com', 
      type: 'GET', 
      dataType: 'JSONP', 
      success: function (res) { 
        //请求成功后的操作
      } 
    }) 
  } 
}

通过这中方法去解决跨域，打包部署时还按这种方法会出问题。解决方法如下：

let serverUrl = '/api/'  //本地调试时 
// let serverUrl = 'https://f.apiplus.cn/'  //打包部署上线时 
export default { 
  dataUrl: serverUrl + 'bj11x5.json' 
}