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 相关文章推荐
jQuery 使用个人心得
Feb 26 Javascript
基于jquery点击自以外任意处,关闭自身的代码
Feb 10 Javascript
用js实现控件的隐藏及style.visibility的使用
Jun 14 Javascript
原生Js实现元素渐隐/渐现(原理为修改元素的css透明度)
Jun 24 Javascript
js页面跳转的问题(跳转到父页面、最外层页面、本页面)
Aug 14 Javascript
JavaScript中判断原生函数检查function是否是原生代码
Sep 09 Javascript
Javascript removeChild()删除节点及删除子节点的方法
Dec 27 Javascript
BootstrapValidator不触发校验的实现代码
Sep 28 Javascript
js中的数组对象排序分析
Dec 11 Javascript
JS中实现浅拷贝和深拷贝的代码详解
Jun 05 Javascript
jquery图片预览插件实现方法详解
Jul 18 jQuery
vue设置动态请求地址的例子
Nov 01 Javascript
浅谈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 木马攻击防御技巧
2009/06/13 PHP
PHP-Fcgi下PHP的执行时间设置方法
2013/08/02 PHP
PHP中array_map与array_column之间的关系分析
2014/08/19 PHP
使用ltrace工具跟踪PHP库函数调用的方法
2016/04/25 PHP
php pdo oracle中文乱码的快速解决方法
2016/05/16 PHP
如何正确配置Nginx + PHP
2016/07/15 PHP
JavaScript-世界上误解最深的语言分析
2007/08/12 Javascript
Web前端设计模式  制作漂亮的弹出层
2010/10/29 Javascript
扒一扒JavaScript 预解释
2015/01/28 Javascript
jQuery实现的简单提示信息插件
2015/12/08 Javascript
jQuery获取字符串中出现最多的数
2016/02/22 Javascript
JS控制弹出悬浮窗口(一览画面)的实例代码
2016/05/30 Javascript
JavaScript实现反转字符串的方法详解
2017/04/27 Javascript
基于three.js编写的一个项目类示例代码
2018/01/05 Javascript
vue 子组件向父组件传值方法
2018/02/26 Javascript
页面内锚点定位及跳转方法总结(推荐)
2019/04/24 Javascript
NodeJs实现简易WEB上传下载服务器
2019/08/10 NodeJs
javascript 代码是如何被压缩的示例代码
2020/05/06 Javascript
浅谈Vue使用Elementui修改默认的最快方法
2020/12/05 Vue.js
Python实现E-Mail收集插件实例教程
2019/02/06 Python
Python Request爬取seo.chinaz.com百度权重网站的查询结果过程解析
2019/08/13 Python
python ImageDraw类实现几何图形的绘制与文字的绘制
2020/02/26 Python
python实现批量修改文件名
2020/03/23 Python
matplotlib基础绘图命令之imshow的使用
2020/08/13 Python
Python 的 __str__ 和 __repr__ 方法对比
2020/09/02 Python
阿根廷旅游网站:almundo阿根廷
2018/02/12 全球购物
俄罗斯三星品牌商店:GalaxyStore
2020/11/04 全球购物
PHP中如何使用Cookie
2015/10/28 面试题
超级搞笑检讨书
2014/01/15 职场文书
实习生自我评价
2014/01/18 职场文书
小学科学教学反思
2014/01/26 职场文书
2014爱耳日宣传教育活动总结
2014/03/09 职场文书
转让协议书
2015/01/27 职场文书
2015年学校心理健康教育工作总结
2015/05/11 职场文书
会计试用期工作总结2015
2015/05/28 职场文书
springboot集成redis存对象乱码的问题及解决
2022/06/16 Java/Android