Vue項目中跨域的幾種方式

經常使用vue + webpack搭建項目，但在請求某些json數據時存在跨域問題，此時有幾種修改方法

1. 修改后台header， 但如果只是請求外部數據，是沒法修改后台配置的

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

 

2. 修改webpack配置 , 這是使用webpack選項devServer的代理功能 proxy

proxyTable: { 
  '/api': { 
    target: '填寫請求源地址', //源地址 
    changeOrigin: true, //是否跨域
    pathRewrite: { 
      '^/api': '' //路徑重寫 
      } 
  } 
}

注意：如果不設置pathRewrite則可能會出現以上報錯

另外：proxyTable是在vue-cli2.0項目中config/index.js配置好的選項， 實際上它指向build/webpack.dev.config.js中的devServer.proxy

在新版的@vue/cli中（即vue-cli3.0）沒有直接暴露出webpack的配置，只需在根目錄下自行創建vue.config.js然后配置如下

module.exports = {
    devServer: {
    proxy: {
        '/api': {
        target: '填寫請求源地址',
        ws: true,
        changeOrigin: true,
                pathRewrite: {
                   '^/api': ''
                }
        }
    }
     }
}        

最后一般在組件中使用axios或者fetch請求本地服務即可，此時外部數據已經被轉到了本地服務器中

axios.get('/api/xxx')
  .then(res => {
      console.log(res)
  })
  .catch(err => {
      console.log(err)
})

fetch('/api/xxx', {
  method: 'GET',
  headers: {
      'content-type': 'application/json'
  },
  mode: 'no-cors'
  })
  .then(res => res.json())
  .then(json => {
      console.log(json)
   })

 

3.使用jQuery的JSONP()

$.ajax({
  url: '請求的源地址',
  type: 'GET',
  dataType: 'JSONP',
  success(res) {
     console.log(res)
   }
})