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 上下滚动广告
Jun 17 Javascript
使用jQuery全局事件ajaxStart为特定请求实现提示效果的代码
Dec 30 Javascript
HTML页面滚动时获取离页面顶部的距离2种实现方法
Sep 05 Javascript
js hover 定时器(实例代码)
Nov 12 Javascript
JavaScript自定义数组排序方法
Feb 12 Javascript
JS 滚动事件window.onscroll与position:fixed写兼容IE6的回到顶部组件
Oct 10 Javascript
你应该知道的几类npm依赖包管理详解
Oct 06 Javascript
React-intl 实现多语言的示例代码
Nov 03 Javascript
JS实现区分中英文并统计字符个数的方法示例
Jun 09 Javascript
解决jquery有正确返回值但不执行success函数的问题
Aug 20 jQuery
Vue是怎么渲染template内的标签内容的
Jun 05 Javascript
Vue按时间段查询数据组件使用详解
Aug 21 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
在任意字符集下正常显示网页的方法二(续)
2007/04/01 PHP
php cookie 作用范围?不要在当前页面使用你的cookie
2009/03/24 PHP
php jquery 实现新闻标签分类与无刷新分页
2009/12/18 PHP
PHP写杨辉三角实例代码
2011/07/17 PHP
PHP程序开发范例学习之表单 获取文本框的值
2011/08/08 PHP
Codeigniter控制器controller继承问题实例分析
2016/01/19 PHP
php 7新特性之类型申明详解
2017/06/06 PHP
用JQuery调用Session的实现代码
2010/10/29 Javascript
Javascript中正则表达式的全局匹配模式分析
2011/04/26 Javascript
JS中attr和prop属性的区别以及优先选择示例介绍
2014/06/30 Javascript
使用jQuery jqPlot插件绘制柱状图
2014/12/18 Javascript
JavaScript模拟实现继承的方法
2015/03/30 Javascript
easyui Droppable组件实现放置特效
2015/08/19 Javascript
jquery马赛克拼接翻转效果代码分享
2015/08/24 Javascript
js实现的简洁网页滑动tab菜单效果代码
2015/08/24 Javascript
Avalon中文长字符截取、关键字符隐藏、自定义过滤器
2016/05/18 Javascript
easyUI实现(alert)提示框自动关闭的实例代码
2016/11/07 Javascript
jquery实现图片放大点击切换
2017/06/06 jQuery
jquery插件canvaspercent.js实现百分比圆饼效果
2017/07/18 jQuery
小程序清理本地缓存的方法
2018/08/17 Javascript
jquery实现加载更多"转圈圈"效果(示例代码)
2020/11/09 jQuery
[02:28]DOTA2 2017国际邀请赛小组赛回顾
2017/08/09 DOTA
[35:34]Liquid vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
DJango的创建和使用详解(默认数据库sqlite3)
2019/11/18 Python
Python如何把Spark数据写入ElasticSearch
2020/04/18 Python
加大码胸罩、内裤和服装:Just My Size
2019/03/21 全球购物
意大利单身交友网站:Meetic
2020/07/12 全球购物
办公室内勤岗位职责范本
2013/12/09 职场文书
本科生的职业生涯规划范文
2014/01/09 职场文书
大学生个人自荐信样本
2014/03/02 职场文书
初三学习决心书
2014/03/11 职场文书
2014银行领导班子群众路线对照检查材料思想汇报
2014/09/17 职场文书
个人委托书范本汇总
2014/10/01 职场文书
艺术节开幕词
2015/01/28 职场文书
员工辞职信范文大全
2015/05/12 职场文书
导游词之烟台威海蓬莱
2019/11/14 职场文书