Vuecli4 本地服务跨域问题解决

在Vuecli4请求非本地接口时发生：No 'Access-Control-Allow-Origin' header is present on the requested resource.错误

我是逗逼

3731人浏览 · 2020-03-27 10:37:32

我是逗逼 · 2020-03-27 10:37:32 发布

检查是否存在接口代理（是否配置devServer）

官方描述：如果你的前端应用和后端 API 服务器没有运行在同一个主机上，你需要在开发环境下将 API 请求代理到 API 服务器。这个问题可以通过 vue.config.js 中的 devServer.proxy 选项来配置。

devServer: {
		    proxy: {
		      '':{
		        target: 'http://www.xxxxxxx.cn', // 接口域名
		        ws:true,
		        changeOrigin:true  //是否跨域
		      },
		    }
		  },

检查是否存在代理地址与请求地址冲突
如果完成请求代理任然有跨域问题，可以检查是否配置baseURL, 如果存在，删除baseURL配置项，重启服务。
至于为什么代理地址与请求地址冲突，可以从下面两幅图的请求头上找到答案, 如下图：
图一（未配置baseURL）

图二（配置baseURL）
在这里插入图片描述

总结：baseURL 的运行层级高于代理URL,如果存在baseURL,则不运行代理服务

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^