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动态增加删除表格行的小例子
Nov 14 Javascript
Angular用来控制元素的展示与否的原生指令介绍
Jan 07 Javascript
jquery插件qrcode在线生成二维码
Apr 26 Javascript
简单介绍JavaScript数据类型之隐式类型转换
Dec 28 Javascript
超实用的JavaScript表单代码段
Feb 26 Javascript
微信小程序之发送短信倒计时功能
Aug 30 Javascript
JavaScript基于对象方法实现数组去重及排序操作示例
Jul 10 Javascript
Angular使用cli生成自定义文件、组件的方法
Sep 04 Javascript
vue基础之事件v-onclick="函数"用法示例
Mar 11 Javascript
JavaScript undefined及null区别实例解析
Jul 21 Javascript
微信小程序用户登录和登录态维护的实现
Dec 10 Javascript
VUE使用draggable实现组件拖拽
Apr 06 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和MySql来与ODBC数据连接
2006/10/09 PHP
ASP和PHP都是可以删除自身的
2007/04/09 PHP
PHP 飞信好友免费短信API接口开源版
2010/07/22 PHP
PHP mcrypt可逆加密算法分析
2011/07/19 PHP
php 错误处理经验分享
2011/10/11 PHP
解析PHP SPL标准库的用法(遍历目录,查找固定条件的文件)
2013/06/18 PHP
php获取网页中图片、DIV内容的简单方法
2014/06/19 PHP
ThinkPHP实现事务回滚示例代码
2014/06/23 PHP
PHP使用redis位图bitMap 实现签到功能
2019/10/08 PHP
PHP实现单条sql执行多个数据的insert语句方法
2019/10/11 PHP
PHP常用函数之格式化时间操作示例
2019/10/21 PHP
脚本安需导入(装载)的三种模式的对比
2007/06/24 Javascript
jquery+json实现的搜索加分页效果
2010/03/31 Javascript
基于jQuery实现的当离开页面时出现提示的实现代码
2011/06/27 Javascript
JS实现QQ图片一闪一闪的效果小例子
2013/07/31 Javascript
Iframe 自动适应页面的高度示例代码
2014/02/26 Javascript
编写高效jQuery代码的4个原则和5个技巧
2014/04/24 Javascript
新年快乐! javascript实现超级炫酷的3D烟花特效
2019/01/30 Javascript
详解webpack的clean-webpack-plugin插件报错
2020/10/16 Javascript
Python 文件操作实现代码
2009/10/07 Python
Python最基本的输入输出详解
2015/04/25 Python
利用Python批量压缩png方法实例(支持过滤个别文件与文件夹)
2017/07/30 Python
python数值基础知识浅析
2019/11/19 Python
Python xlrd excel文件操作代码实例
2020/03/10 Python
解决json中ensure_ascii=False的问题
2020/04/03 Python
如何使用python记录室友的抖音在线时间
2020/06/29 Python
快速创建python 虚拟环境
2020/11/28 Python
Penhaligon’s英国官网:成立于1870年的英国香水制造商
2021/02/18 全球购物
Johnson Fitness澳大利亚:高级健身器材
2021/03/16 全球购物
局域网定义和特性
2016/01/23 面试题
精彩的大学生自我评价
2013/11/17 职场文书
2014各大专业毕业生自我评价
2014/09/17 职场文书
大学生实习证明
2015/06/16 职场文书
2015年办税服务厅工作总结
2015/07/23 职场文书
小学一年级语文教学反思
2016/03/03 职场文书
Java实现带图形界面的聊天程序
2022/06/10 Java/Android