Vue 配置本地代理解决跨域问题

.一、为什么会出现跨域问题

出于浏览器的同源策略限制。同源策略（Sameoriginpolicy）是一种约定，它是浏览器最核心也最基本的安全功能，同源策略会阻止一个域的javascript脚本和另外一个域的内容进行交互。

二、什么是跨域

当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域。
当出现跨域问题时浏览器会报如下错误：

三.如何解决跨域问题

在vue中使用proxy进行跨域的原理是：将域名发送给本地的服务器（启动vue项目的服务,loclahost:8080），再由本地的服务器去请求真正的服务器。

一.vue 配置本地代理解决跨域步骤：

1.在vue项目根目录下找到vue.config.js文件（如果没有该文件则自己创建），在proxy中设置跨域

module.exports={
    publicPath:'./',
    outputDir: (process.env.NODE_ENV === "production") ? 'smart' : 'test', // 不同的环境打不同包名
    devServer:{
    	   	// hot:true,//是否自动保存
	        open : true,//是否自动启动
	        port : 8080,//默认端口号
	        // host : "0.0.0.0",
	        https: false, //是否为https 请求 https:{type:Boolean}
	        proxy:{
            '/api':{
            	//target: process.env.VUE_APP_URL, //可以根据不同环境有不同的接口域名
                target:'http://58.250.250.106/',// 固定的域名
                changOrigin:true, //允许跨域 
                pathRewrite:{
                    "^/api":"" /* 重写路径，当我们在浏览器中看到请求的地址为：http://localhost:8080/api/core/getData/userInfo 时
                    实际上访问的地址是：http://121.121.67.254:8185/core/getData/userInfo,因为重写了 /api
                   */
                }
            }
        }
    }
}

2.在main.js 中引入axios 并将请求根路径 baseURL设置为/api ,这时候我们的跨域就已经完成了。

import axios from 'axios'
//配置请求的根路径
axios.defaults.baseURL="/api"; 
//全局挂载axios
Vue.prototype.$axios = axios;

//注：下面是个人学习记录用
//条件多的时候也可以进行判断
//axios.defaults.baseURL= process.env.NODE_ENV === 'production' ?'http://58.250.250.106/':"/api";
// 让ajax携带cookie 
//axios.defaults.withCredentials = true 
//通过axios拦截器 添加token验证
//axios.interceptors.request.use(config=>{
  //config.headers.Authorization =window.sessionStorage.getItem('token')
  //在最后必须return config
  //return config
//})

3.在页面中使用axios 发送请求。

//请求时baseURL 请求头可以省略不写
this.$axios.post("/rest/index/login/login", {
          login_info:
"eyJ1c2VybmFtZSI6IldYQkQwMSIsInBhc3N3b3JkIjoiOGRkY2ZmM2E4MGY0MTg5Y2ExYzlkNGQ5MDJjM2M5MDkifQ==",
          sso: 1,
          pe_signals: "32a14c293576410dab5eb7610aefd856",
        })
        .then((res) => {
          console.log(res);
        });

这样就可以拿到数据了：