vue項目中，前端與后臺進行數據請求或者提交的時候，如果后臺沒有設置跨域，前端本地調試代碼的時候就會報“No 'Access-Control-Allow-Origin' header is present on the requested resource.” 這種跨域錯誤。 ## **要想本地正常的調試，解決的辦法有三個**： #### 一、后臺更改header ``` ~~~csharp header('Access-Control-Allow-Origin:*');//允許所有來源訪問 header('Access-Control-Allow-Method:POST,GET');//允許訪問的方式 ~~~ ``` 這樣就可以跨域請求數據了。 ## 二、使用JQuery提供的jsonp (注：vue中引入jquery，自行百度) ``` ~~~php 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(',') } }) } } ~~~ ``` # Vue跨域解決方法 [為光pig](https://www.jianshu.com/u/203cd15279df)關注贊賞支持 # Vue跨域解決方法 [](https://www.jianshu.com/u/203cd15279df) [為光pig](https://www.jianshu.com/u/203cd15279df)關注 12020.12.03 17:47:18字數 208閱讀 10,686 vue項目中，前端與后臺進行數據請求或者提交的時候，如果后臺沒有設置跨域，前端本地調試代碼的時候就會報“No 'Access-Control-Allow-Origin' header is present on the requested resource.” 這種跨域錯誤。 ## **要想本地正常的調試，解決的辦法有三個**： #### 一、后臺更改header ~~~csharp header('Access-Control-Allow-Origin:*');//允許所有來源訪問 header('Access-Control-Allow-Method:POST,GET');//允許訪問的方式 ~~~ 這樣就可以跨域請求數據了。 ## 二、使用JQuery提供的jsonp (注：vue中引入jquery，自行百度) ~~~php 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 代理解決（項目使用vue-cli腳手架搭建） 例如請求的url:“/business/remind/user” 1、打開vue.config.js.js,在proxy中添寫如下代碼： ``` ~~~kotlin // 運行配置 devServer: { port: '9527', //代理端口 open: false, //項目啟動時是否自動打開瀏覽器，我這里設置為false,不打開，true表示打開 proxy: { '/api': { target: process.env.VUE_APP_HTTP_URL, changeOrigin: true, //是否跨域 pathRewrite: { //重寫路徑 '^/api': '/' // 或 者 'http://localhost:8080/api' } // 既然我們設置了代理，則所有請求url都已寫成/api/xxx/xxx，那請求如何知道我們到底請求的是哪個服務器的數據呢 // 因此這里的意義在于， 以 /api開頭的url請求，代理都會知道實際上應該請求那里， // ‘我是服務器/api’，后面的/api根據實際請求地址決定，即我的請求url：/api/test/test，被代理后請求的則是 // https://我是服務器/api/test/test } } }, ~~~ ``` ## 附帶vue.config.js下的代碼 ``` ~~~jsx const chalk = require('chalk') const path = require('path'); function resolve (dir) { return path.join(__dirname, dir) } module.exports = { // 沒有書寫outputDir屬性 默認'dist' 對應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相關配置 css: { // 是否使用css分離插件 ExtractTextPlugin extract: true, // 開啟 CSS source maps? sourceMap: false, // css預設器配置項 loaderOptions: {} // 啟用 CSS modules for all css / pre-processor files. // modules: false }, // 運行配置 devServer: { port: '8222', //代理端口 open: false, //項目啟動時是否自動打開瀏覽器，我這里設置為false,不打開，true表示打開 proxy: { '/api': { target: process.env.VUE_APP_HTTP_URL, changeOrigin: true, //是否跨域 pathRewrite: { //重寫路徑 '^/api': '/' // 或 者 'http://localhost:8080/api' } // 既然我們設置了代理，則所有請求url都已寫成/api/xxx/xxx，那請求如何知道我們到底請求的是哪個服務器的數據呢 // 因此這里的意義在于， 以 /api開頭的url請求，代理都會知道實際上應該請求那里， // ‘我是服務器/api’，后面的/api根據實際請求地址決定，即我的請求url：/api/test/test，被代理后請求的則是 // https://我是服務器/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')); // 判斷不同環境 做相應處理 if(process.env.NODE_ENV === 'production') { // 測試生產環境, 不壓縮js代碼 if (process.env.VUE_APP_TITLE === 'alpha') { config.optimization.minimize(false) } } //set第一個參數：設置的別名，第二個參數：設置的路徑 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 = '公募綜合業務平臺' return args }) } } ~~~ ```