解决跨域Cross origin requests are only supported for protocol schemes的其中一种种办法

跨域问题描述

使用vue通过axios.post方法访问spring boot 接口时，会报跨域错误，错误信息如下：

Access to XMLHttpRequest at ‘http://localhost:9001/security/login’ from origin ‘http://localhost:8080’ has been blocked by CORS policy: Response to preflight request doesn’t pass access control check: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

其中，9001/security/login接口是访问spring boot 的接口，该接口可以通过postman正常访问,;
8080端口是前端vue页面访问的，通过该页面访问后端接口，就会报如上错误信息。

这是因为跨域导致的，因为它们两个的端口不一致。

解决如上问题，需要配置 vue.confg.js 的内容。

vue.config.js 是一个可选的配置文件，如果项目的 (和 package.json 同级的) 根目录中存在这个文件，那么它会被 @vue/cli-service 自动加载。

vue.confg.js 的文件路径已经告诉我们，参考官网地址：https://cli.vuejs.org/zh/config/#vue-config-js

参考此文档，所以我这里把配置写成

//vue.confg.js 

module.exports = {
  devServer: {
    proxy: 'http://localhost:9001/security/'
  }
}

但修改这个文件之后，访问接口还是报相同错误，因为是axios创建时候使用的路径不对
只是我的axios 配置

// 文件部分内容
import axios from 'axios';
import config from './config'


let baseURL = "";
// 环境的切换
if (process.env.NODE_ENV == 'development') {
   // baseURL = config.base_url_dev;
	 baseURL = ""; //此处的关键是这里为空
} 
else if (process.env.NODE_ENV == 'debug') {
    baseURL = config.base_url_dev;
} 
else if (process.env.NODE_ENV == 'production') {
    baseURL = config.base_url_prod;
}

// axios.defaults.timeout = 10000;//设置默认的请求超时时间


const instance = axios.create({
    // process.env.NODE_ENV === 'development' 来判断是否开发环境
    baseURL: baseURL,
    timeout: 10000
});


// 文件部分无关内容未展示。。。。。。

//config.js文件， 被上面的代码引用
const base_url_dev = "http://localhost:9001/security/";

const base_url_prod = "http://localhost:9001/security/";


export default {base_url_dev, base_url_prod}

开发环境需要把 baseURL 设置程 空或者 “/”

这样，访问就被代理了，
再次访问/login接口， 可以看到，它变成http://localhost:8080/login，这样就不跨域了， 它实际会代理转发到配置的代理地址中去http://localhost:9001/security/

关于代理的配置更详细内容，请参考此文章：https://blog.csdn.net/cn_1937/article/details/106490232

最后说下 vue 的开发环境，生产环境的的不同是怎么回事。