今天在本地開發時候碰到了跨域的問題，突然覺著跨域問題在所難免啊，之前沒有沒有碰到總覺著解決跨域很高大上的樣紙，其實就是受限於網絡的同源策略，跨域前後端都可以進行處理。

1，後端更改header

header(‘Access-Control-Allow-Origin:*‘);//允許所有來源訪問 
header(‘Access-Control-Allow-Method:POST,GET‘);//允許訪問的方式 

2，使用jsonp進行跨域

getData () { 
    var self = this 
    $.ajax({ 
      url: ‘http://f.apiplus.cn/bj11x5.json‘, 
      type: ‘GET‘, 
      dataType: ‘JSONP‘, 
      success: function (res) { 
        self.data = res.data.slice(0, 3) 
        self.opencode = res.data[0].opencode.split(‘,‘) 
      } 
    }) 
  } 

3，使用webpack反向代理（項目中使用vue-cli腳手架搭建）

1，在config/index.js中的proxyTable添加如下代碼：

proxyTable: {
      ‘/gp‘: {
        target: ‘http://10.0.67.65/uat_branch/IspWeb/‘,
        changeOrigin: true,
        pathRewrite: {
          ‘^/gp‘: ‘‘
        }
      }
    },

在公共的apiConfig中加入跨域的環境：

case 5:
      //跨域環境
      apiObj.baseUrl = ‘/gp/‘;
      apiObj.File_upload_URL 
 
= ‘‘;
      break

至此所有的請求接口類似：http://localhost:8080/gp/api/v1.0/user/login

嘗試請求後發現該接口地址404，後發現：代理設置完成後需要重新 npm run dev

vue項目開發，用webpack配置解決跨域問題