vue項(xiàng)目中，前端與后臺進(jìn)行數(shù)據(jù)請求或者提交的時候，如果后臺沒有設(shè)置跨域，前端本地調(diào)試代碼的時候就會報“No 'Access-Control-Allow-Origin' header is present on the requested resource.” 這種跨域錯誤。

要想本地正常的調(diào)試，解決的辦法有三個：

一、后臺更改header

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

這樣就可以跨域請求數(shù)據(jù)了。

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

methods: { 
  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(',') 
      } 
    }) 
  } 
} 

通過這種方法也可以解決跨域的問題。

三、使用http-proxy-middleware 代理解決（項(xiàng)目使用vue-cli腳手架搭建）

例如請求的url:“/business/remind/user”
1、打開vue.config.js.js,在proxy中添寫如下代碼：

// 運(yùn)行配置
    devServer: { 
        port: '9527', //代理端口
        open: false, //項(xiàng)目啟動時是否自動打開瀏覽器，我這里設(shè)置為false,不打開，true表示打開
        proxy: {
            '/api': {
                target: process.env.VUE_APP_HTTP_URL,
                changeOrigin: true, //是否跨域
                pathRewrite: { //重寫路徑
                    '^/api': '/'  // 或 者 'http://localhost:8080/api'
                }
                // 既然我們設(shè)置了代理，則所有請求url都已寫成/api/xxx/xxx，那請求如何知道我們到底請求的是哪個服務(wù)器的數(shù)據(jù)呢
                // 因此這里的意義在于， 以 /api開頭的url請求，代理都會知道實(shí)際上應(yīng)該請求那里，
                // ‘我是服務(wù)器/api’，后面的/api根據(jù)實(shí)際請求地址決定，即我的請求url：/api/test/test，被代理后請求的則是
                // https://我是服務(wù)器/api/test/test
            }
        }
    },

附帶vue.config.js下的代碼

const chalk = require('chalk')
const path = require('path');
function resolve (dir) {
  return path.join(__dirname, dir)

}
module.exports = {
    // 沒有書寫outputDir屬性   默認(rèn)'dist'  對應(yīng)dev.assetsSubDirectory
    outputDir: 'dist',
    // https://vuejs.org/v2/guide/installation.html#Runtime-Compiler-vs-Runtime-only
    // compiler: false,
    //在vue-cli.3.3版本后 baseUrl被廢除了，因此這邊要寫成 publicPath ( 資源地址 )
    publicPath: process.env.NODE_ENV === 'production' ? process.env.VUE_APP_PUBLICPATH : '/' , 
    // css相關(guān)配置
    css: {
        // 是否使用css分離插件 ExtractTextPlugin
        extract: true,
        // 開啟 CSS source maps?
        sourceMap: false,
        // css預(yù)設(shè)器配置項(xiàng)
        loaderOptions: {}
        // 啟用 CSS modules for all css / pre-processor files.
        // modules: false
    },
    // 運(yùn)行配置
    devServer: { 
        port: '8222', //代理端口
        open: false, //項(xiàng)目啟動時是否自動打開瀏覽器，我這里設(shè)置為false,不打開，true表示打開
        proxy: {
            '/api': {
                target: process.env.VUE_APP_HTTP_URL,
                changeOrigin: true, //是否跨域
                pathRewrite: { //重寫路徑
                    '^/api': '/'  // 或 者 'http://localhost:8080/api'
                }
                // 既然我們設(shè)置了代理，則所有請求url都已寫成/api/xxx/xxx，那請求如何知道我們到底請求的是哪個服務(wù)器的數(shù)據(jù)呢
                // 因此這里的意義在于， 以 /api開頭的url請求，代理都會知道實(shí)際上應(yīng)該請求那里，
                // ‘我是服務(wù)器/api’，后面的/api根據(jù)實(shí)際請求地址決定，即我的請求url：/api/test/test，被代理后請求的則是
                // https://我是服務(wù)器/api/test/test
            }
        }
    },
    chainWebpack: config => {
        // 提示輸出的哪個地址
        console.log(chalk.blueBright('\n\n running ' + process.env.VUE_APP_PROJ_NAME + ' : ') + 
                    chalk.yellowBright(process.env.VUE_APP_HTTP_URL + ' please wait... \n'));
        // 判斷不同環(huán)境 做相應(yīng)處理           
        if(process.env.NODE_ENV === 'production') {
            // 測試生產(chǎn)環(huán)境, 不壓縮js代碼
            if (process.env.VUE_APP_TITLE === 'alpha') {
                config.optimization.minimize(false)
            }
        }
        //set第一個參數(shù)：設(shè)置的別名，第二個參數(shù)：設(shè)置的路徑
        config.resolve.alias
        .set('@',resolve('./src'))
        .set('components',resolve('./src/components'))
        .set('assets',resolve('./src/assets'))
        .set('views',resolve('./src/views'))
        .set('network',resolve('./src/network'))
        //注意 store 和 router 沒必要配置

        config.plugin('html')
        .tap(args => {
            args[0].title = '公募綜合業(yè)務(wù)平臺'
            return args
        })
    }
}