Vue-cli4腳手架和Axios的跨域解決方案

雖然是場誤會，最后我會分享自己的配置信息

問題從這開始

提示接口不能返回數據

如圖：

Access to XMLHttpRequest at 'http://localhost:9101/educms/bannerfront/getAllBanner' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

圖一：

 

 圖二：

 

 

測試后端接口

 

 get請求可以通過瀏覽器得到數據

 

 

 9101 nginx接口測試

 

 

接口測試

沒有反應

 

 

 

nginx可以返回數據

 

其他接口也可以返回數據

 

版本問題？ 

Nuxt

 

vue-cli

PS D:\***\**i_vue\vue-admin-front-nuxt> vue -V
@vue/cli 4.3.1

 

接口測試

加上api就有反應了，但是我應該怎么做呢？

 

 

 

原來nginx.conf文件名字寫錯了

 

成功了

 

 

 我的配置

第一步：

 

第二步：

 

 代碼如下：

import axios from 'axios'

// 創建axios實例
const service = axios.create({
  //baseURL: process.env.VUE_APP_API,
  baseURL: 'http://localhost:9101', // api的base_url
  timeout: 20000 // 請求超時時間
})

export default service

 

第三步：

 

 banner.js代碼

import request from '@/utils/request'

export default {
    //查詢前兩條banner數據
  getListBanner() {
    return request({
      url: '/educms/bannerfront/getAllBanner',
      method: 'get'
    })
  }
}

 

 index.js代碼

import request from '@/utils/request'

export default {
    //查詢熱門課程和名師
  getIndexData() {
    return request({
      url: '/eduservice/indexfront/index',
      method: 'get'
    })
  }
}

 

第四步

 

 

簡單問題復雜化了，哎……