vue_cli3.x 跨域访问

本地使用vue创建项目时，由于需要开启本地服务，因此会占用端口，导致发送ajax请求时需要跨域，以下是跨域请求的解决方案之一，出现同样问题的朋友可以借鉴参考，谢谢！

问题一

问题描述：当我们发送跨域请求时，如果不需要保留cookie信息，出现访问限制。

解决方案：

//在服务器端设置请求头，允许所有域名访问
header('Access-Control-Allow-Origin:*');

问题二

问题描述：跨域成功后，设置session发现cookie为空。

解决方案：

//在main.js中添加如下代码：
    import axios from 'axios'
    axios.defaults.withCredentials = true;  //设置发起请求的‘凭据模式’为‘include’，
//session值可以正常打印出来

问题三

问题描述：session值可以打印，但是跨域请求失败，被CORS策略阻止访问。

报错信息：

在“http://panhuo.cn/saas/jxc”中对XMLHttpRequest的访问已被CORS策略阻止:当请求的凭据模式为“include”时，响应中的“Access- control - allow - origin”报头的值必须不是通配符“*”。XMLHttpRequest发起的请求的凭据模式由withCredentials属性控制。

解决方案：

//在vue.config.js文件中设置代理
proxy: {  //配置代理
      //跨域设置
      "/api": {
        target: "http://learnku.cn:80/saas/jxc",   //请求源地址
        ws: true,       //是否代理
        changeOrigin: true,  //是否跨域
      }
    }

注意： 当配置代理成功后，需要重启服务，否则配置文件不会生效。

至此问题已解决，跨域成功，且可以获取到cookie值。

vue 跨域