Vue 项目中遇到的跨域问题及解决方法(后台php)


Posted in Javascript onMarch 28, 2018

问题描述

前端 vue 框架,后台 php,百度跨域问题后台加这段代码

header("Access-Control-Allow-Origin: *");

加了之后报这个错:

The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'.
The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'.

Vue 项目中遇到的跨域问题及解决方法(后台php)

解决办法

文章链接:CORS: credentials mode is ‘include'

xhrFields: {
 withCredentials: false
},

withCredentials: true 改成 withCredentials: false,如果你没加上面那段代码当然也不会报这个错。虽然是解决方法很简单,但经此发现许多知识没掌握不得不梳理下。

•HTTP 请求方式有许多种,有些请求会触发 CORS 预检请求。“需预检的请求”会使用 OPTIONS 方法发起一个预检请求到服务器,以获知服务器是否允许该实际请求。

•对于跨域请求浏览器一般不会发送身份凭证信息。如果要发送凭证信息,需要设置 XMLHttpRequest 的 withCredentials 属性为 true:withCredentials: true。此时要求服务器的响应信息中携带 Access-Control-Allow-Credentials: true,否则响应内容将不会返回。

•对于携带身份凭证的请求,服务器不得设置 Access-Control-Allow-Origin 的值为“*”。因为请求头携带了 Cookie 信息。要将 Access-Control-Allow-Origin 的值设置为 http://www.zrt.local:8080。

•另外,响应头中也携带了 Set-Cookie 字段,尝试对 Cookie 进行修改。如果操作失败,将会抛出异常。

跨域请求想要带上 cookies 必须在请求头里面加上:

crossDomain: true, 
xhrFields: {
  withCredentials: true
}

又变成文章开头的问题了,解决办法:

后台代码:

Access-Control-Allow-Origin: 'http://www.zrt.local:8080'
Access-Control-Allow-Credentials: true

前端代码:

crossDomain: true, 
xhrFields: {
  withCredentials: true
}

跟之前一样就行了。

总结

以上所述是小编给大家介绍的Vue 项目中遇到的跨域问题及解决方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
js之事件冒泡和事件捕获详细介绍
Oct 28 Javascript
jquery中each方法示例和常用选择器
Jul 08 Javascript
Flow之一个新的Javascript静态类型检查器
Dec 21 Javascript
jQuery实现简单的点赞效果
May 29 Javascript
JS构造函数与原型prototype的区别介绍
Jul 04 Javascript
JavaScript中Array的实用操作技巧分享
Sep 11 Javascript
jQuery EasyUI 获取tabs的实例解析
Dec 06 Javascript
Vue 进阶之路(三)
Apr 18 Javascript
浅谈目前可以使用ES10的5个新特性
Jun 25 Javascript
vue学习之Vue-Router用法实例分析
Jan 06 Javascript
微信小程序开发数据缓存基础知识辨析及运用实例详解
Nov 06 Javascript
vue 实现基础组件的自动化全局注册
Dec 25 Vue.js
浅谈React高阶组件
Mar 28 #Javascript
vue数据控制视图源码解析
Mar 28 #Javascript
jQuery+ajax读取json数据并按照价格排序示例
Mar 28 #jQuery
vue 开发一个按钮组件的示例代码
Mar 27 #Javascript
vue-cli脚手架-bulid下的配置文件
Mar 27 #Javascript
vue2中使用less简易教程
Mar 27 #Javascript
浅谈Vue内置component组件的应用场景
Mar 27 #Javascript
You might like
php使用curl发送json格式数据实例
2013/12/17 PHP
php常用表单验证类用法实例
2015/06/18 PHP
PHP自毁程序(慎用)
2015/07/09 PHP
php与python实现的线程池多线程爬虫功能示例
2016/10/12 PHP
PHP+AjaxForm异步带进度条上传文件实例代码
2017/08/14 PHP
PHP过滤器 filter_has_var() 函数用法实例分析
2020/04/23 PHP
Javascript select控件操作大全(新增、修改、删除、选中、清空、判断存在等)
2008/12/19 Javascript
JS操作数据库的实例代码
2013/10/17 Javascript
jquery自定义函数的多种方法
2014/01/09 Javascript
JS响应鼠标点击实现两个滑块区间拖动效果
2015/10/26 Javascript
jquery验证邮箱格式是否正确实例讲解
2015/11/16 Javascript
jQuery实现搜索页面关键字的功能
2017/02/16 Javascript
微信小程序 跳转传递数据的实例
2017/07/06 Javascript
zTree获取当前节点的下一级子节点数实例
2017/09/05 Javascript
vue-router配合ElementUI实现导航的实例
2018/02/11 Javascript
JS实现的文件拖拽上传功能示例
2018/05/21 Javascript
详解基于webpack&gettext的前端多语言方案
2019/01/29 Javascript
小程序实现上下移动切换位置
2019/09/23 Javascript
vue-drawer-layout实现手势滑出菜单栏
2020/11/19 Vue.js
[01:30]我们共输赢 完美世界城市挑战赛开启全新赛季
2019/04/19 DOTA
[00:59]DOTA2英雄背景故事——上古巨神
2020/06/28 DOTA
在Python的Django框架中simple-todo工具的简单使用
2015/05/30 Python
python xlsxwriter库生成图表的应用示例
2018/03/16 Python
Python使用分布式锁的代码演示示例
2018/07/30 Python
在pycharm上mongodb配置及可视化设置方法
2018/11/30 Python
python替换字符串中的子串图文步骤
2019/06/19 Python
python:目标检测模型预测准确度计算方式(基于IoU)
2020/01/18 Python
HTML5中的进度条progress元素简介及兼容性处理
2016/06/02 HTML / CSS
FirstCry阿联酋儿童和婴儿产品网上购物:FirstCry.ae
2021/02/22 全球购物
大学生求职简历的自我评价
2013/10/21 职场文书
物流合作计划书
2014/01/10 职场文书
双十佳事迹材料
2014/01/29 职场文书
《回乡偶书》教学反思
2014/04/12 职场文书
开展批评与自我批评发言材料
2014/10/17 职场文书
国庆节慰问信
2015/02/15 职场文书
居委会工作总结2015
2015/05/18 职场文书