1. 程式人生 > 程式設計 >Vue跨域請求問題解決方案過程解析

Vue跨域請求問題解決方案過程解析

一、這是我們本次要請求的url介面地址http://iwenwiki.com/api/blueberrypai/getBlueBerryJamInfo.php

Vue跨域請求問題解決方案過程解析

檢視頁面響應資訊,提示跨域有問題

Vue跨域請求問題解決方案過程解析####

二、解決上面跨域問題:根目錄寫入以下vue.config.js

// vue.config.js

module.exports = {
 devServer: {
  proxy: {
   // 配置跨域
   '/api': {
    target: 'http://iwenwiki.com',ws: true,changOrigin: true,pathRewrite: {
     '^/api': ''
    }
   }
  }
 },}

三、然後在傳送ajax請求的地方做如下操作,使用在上面檔案中配置的api。api/blueberrypai/getBlueBerryJamInfo.php是我的請求路徑一部分,根據自己具體需求寫。然後請求就可以成功傳送。

Vue跨域請求問題解決方案過程解析

配置完成之後一定要重啟(重點!!!)

Vue跨域請求問題解決方案過程解析####

四、如果想不填寫其中“/api”,也可以去main.js中配置全域性配置,具體如下

Vue跨域請求問題解決方案過程解析Vue跨域請求問題解決方案過程解析

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援我們。