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值。

sunshine

讨论数量: 1

"/api" 这个对应的是什么呢?

3个月前 评论
堕落无心情 (楼主) 3个月前
Chai (作者) 3个月前

请勿发布不友善或者负能量的内容。与人为善,比聪明更重要!