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 相关文章推荐
在一个form用一个SUBMIT(或button)分别提交到两个处理表单页面的代码
Feb 15 Javascript
JS鼠标事件大全 推荐收藏
Nov 01 Javascript
JQuery设置文本框和密码框得到焦点时的样式
Aug 30 Javascript
JavaScript Ajax Json实现上下级下拉框联动效果实例代码
Nov 23 Javascript
搭建pomelo 开发环境
Jun 24 Javascript
使用javascript将时间转换成今天,昨天,前天等格式
Jun 25 Javascript
jquery ajax结合thinkphp的getjson实现跨域的方法
Jun 06 Javascript
Bootstrap实现的标签页内容切换显示效果示例
May 25 Javascript
JS 验证密码 不能为空,必须含有数字、字母、特殊字符,长度在8-12位
Jun 21 Javascript
js实现鼠标移动到图片产生遮罩效果
Oct 21 Javascript
JavaScript简单实现动态改变HTML内容的方法示例
Dec 25 Javascript
Javascript中的奇葩知识,你知道吗?
Jan 25 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+mysql分页代码详解
2008/03/27 PHP
PHP 输出URL的快捷方式示例代码
2013/09/22 PHP
PHP中如何判断exec函数执行成功?
2016/08/04 PHP
ThinkPHP 3.2.3实现页面静态化功能的方法详解
2017/08/03 PHP
jBox 2.3基于jquery的最新多功能对话框插件 常见使用问题解答
2011/11/10 Javascript
jquery选择器、属性设置用法经验总结
2013/09/08 Javascript
jQuery中delegate和on的用法与区别详细解析
2014/01/26 Javascript
JS嵌套函数调用上下文的问题解决
2014/03/26 Javascript
JS自定义选项卡函数及用法实例分析
2015/09/02 Javascript
BootStrap实现树形目录组件代码详解
2016/06/21 Javascript
JS实现页面数据无限加载
2016/09/13 Javascript
读Javascript高性能编程重点笔记
2016/12/21 Javascript
canvas红包照片实例分享
2017/02/28 Javascript
详解Vuejs2.0之异步跨域请求
2017/04/20 Javascript
MvcPager分页控件 适用于Bootstrap
2017/06/03 Javascript
vue随机验证码组件的封装实现
2020/02/19 Javascript
python实现用户登录系统
2016/05/21 Python
python机器学习库常用汇总
2017/11/15 Python
Python3之手动创建迭代器的实例代码
2019/05/22 Python
Django多数据库的实现过程详解
2019/08/01 Python
python excel转换csv代码实例
2019/08/26 Python
Python + selenium + crontab实现每日定时自动打卡功能
2020/03/31 Python
Python新手如何理解循环加载模块
2020/05/29 Python
IE支持HTML5的解决方法
2009/10/20 HTML / CSS
英国DIY汽车维修配件网站:DIY Car Service Parts
2019/08/30 全球购物
牧马人澳大利亚官网:Wrangler澳大利亚
2019/10/08 全球购物
请假条标准格式规范
2014/04/10 职场文书
英语故事演讲稿
2014/04/29 职场文书
最常使用的求职信
2014/05/25 职场文书
庆祝三八妇女节标语
2014/10/09 职场文书
个人租房协议书(范本)
2014/10/14 职场文书
2014年秘书工作总结
2014/11/25 职场文书
技术员岗位职责
2015/02/04 职场文书
商务宴会祝酒词
2015/08/11 职场文书
2016年青少年禁毒宣传教育活动总结(学校)
2016/04/05 职场文书
我的暑假生活作文(五年级)范文
2019/08/07 职场文书