VUE3.0使用proxy跨域問題:'http://localhost:8888' has been blocked by CORS policy:

第一次進行vue的框架搭建,遇到了太多的坑,只能一邊跳坑,一邊填坑,希望最後別把自己給埋了。
以下是在使用proxy代理設置跨域時的問題:
proxy代理
解決方法:
在src/utils/request.js文件中將baseURL註釋掉便可以,因爲既然已經配置代理了,axios就不需再設置baseURL了,不然就不會經過代理處理。

// create an axios instance
const service = axios.create({
  //baseURL: process.env.VUE_APP_BASE_API,    // url = base url + request url
  withCredentials: true,    // send cookies when cross-domain requests
  timeout: 5000    // request timeout
})

再說一下proxy代理設置
vue.config.js文件:

module.exports = {
	lintOnSave: process.env.NODE_ENV === 'development',
	devServer: {
	    port: port,
	    open: true,
	    https: false,
	    overlay: {
	      warnings: false,
	      errors: true
	    },
	    proxy: {
	      '/oraflapi': {
	        target: process.env.VUE_APP_BASE_ORAFLAPI,	// 目標 API 地址
	        changeOrigin: true,	// 允許websockets跨域
	        ws: true,
	        pathRewrite: {
	          '^/oraflapi': '/oraflapi'
	        }
	      },
	      '/bsw': {
	        target: process.env.VUE_APP_BASE_BSW ,
	        changeOrigin: true,
	        ws: true,
	        pathRewrite: {
	          '^/bsw': '/bsw'
	        }
	      },
	      '/oraflfile': {
	        target: process.env.VUE_APP_BASE_ORAFLFILE ,
	        changeOrigin: true,
	        ws: true,
	        pathRewrite: {
	          '^/oraflfile': '/oraflfile'
	        }
	      },
	    },
	  },
  }

.env.development文件:

# just a flag
ENV = 'development'

# base api  
VUE_APP_BASE_ORAFLAPI = 'http://10.6.132.113:8080'
VUE_APP_BASE_BSW = 'http://10.6.132.113:8100'
VUE_APP_BASE_ORAFLFILE = 'http://10.6.132.113:8263'

VUE_CLI_BABEL_TRANSPILE_MODULES = true

api.js文件中調用接口:

import request from '@/utils/request'

export function fetchList(data) {
  return request({
    url: '/oraflapi/queryAssetListPage',
    method: 'post',
    data
  })
}

以上就是本次遇到的問題了。如果您覺得解決了問題,可以給我一個贊以示鼓勵呀,共勉。

發佈了44 篇原創文章 · 獲贊 3 · 訪問量 1萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章