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
  })
}

以上就是本次遇到的问题了。如果您觉得解决了问题,可以给我一个赞以示鼓励呀,共勉。

发布了45 篇原创文章 · 获赞 7 · 访问量 1万+

猜你喜欢

转载自blog.csdn.net/ThisEqualThis/article/details/101049973