前端AJAX请求跨域时遇到的一些坑
来源:互联网 发布:淘宝卖计生用品 编辑:程序博客网 时间:2024/06/10 13:30
Access-Control-Allow-Origin
的问题Access-Control-Allow-Headers
的问题- cookie的问题
- OPTIONS请求
- 完整代码
这两天在做公司的PC站时因为需要使用angular
的$http
服务存取数据,而且接口又在另一个域名下面,不得不研究下跨域的问题. 以下把这两天遇到的一些问题总结下.(都是我自己遇到的一些问题, 所以可能不太全面)
Access-Control-Allow-Origin
的问题
跨域遇到的第一个问题就是Access-Control-Allow-Origin
的错误, Chrome报错Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
. 即当前发出请求的域名不在服务器的白名单中, 怎么办呢?
当然,最简单的方法就是在被访问的服务端返回的内容上面加上Access-Control-Allow-Origin
响应头, 值为*
或是当前网站的域名. 使用*
的话虽然方便, 但容易被别的网站乱用,总归有些不太安全; 设置为当前网站的域名的话又只能设置一个. 我的解决办法是设置一个允许的域名白名单, 判断当前请求的refer
地址是否在白名单里,如果是,就设置这个地址到Access-Control-Allow-Origin
中去,否则就不设置这个响应头.
以下是整理后的代码(实际的白名单列表是写在配置文件中的):
Access-Control-Allow-Headers
的问题
以过上面的代码已经实现了跨域中的第一步,GET请求一切正常. 可是需要POST请求发送数据时又出问题了, Chrome报错Request header field Content-Type is not allowed by Access-Control-Allow-Headers in preflight response.
查了下资料,大致意思是请求头中的Content-Type
字段内容没有在Access-Control-Allow-Headers
中被设置为允许.
这个简单,只需要把这个内容加在Access-Control-Allow-Headers
上面就行了,顺便也把其它常用的头都加进去吧.
搞定.
cookie的问题
用户登录时的POST表单发送问题解决了,紧接着又出现了另一个问题: 系统是通过cookie与后端交互的,而这样跨域时每次请求都是独立的,都会生成不同的cookie. 而cookie里面保存了PHP的session id的信息,自然就无法顺畅的与后端进行交互.
这个处理起来似乎比较麻烦,过程就不说了,最终找到的解决方案是在PHP中再加一个header, 同时JS里也要设置一下:
JS里面也要设置Credentials, 下面是angular的代码, jQuery类似:
如此一来便解决了跨域时cookie的问题.
OPTIONS请求
以上问题都解决了, 基本上跨域已经搞定, 但仔细看Chrome的Network日志, 发现有些请求会出现两次: 第一次是OPTIONS
请求方式, 第二次才是正常的POST
. 这个OPTIONS
是干嘛的呢?
查了些资料并且测试了下, 发现OPTIONS
就是相当于在正式请求接口之前去获取以下header, 自然就是我们前面所设置的那些header. 如果在这次OPTIONS
请求中服务器有返回正确的header, 这时才会执行后面真正的请求; 否则请求将会被拒绝, 并抛出错误.
即然这次OPTIONS请求仅仅是为了获取header的, 那么给它一个空的返回就行了呗, 不需要做任何实际的操作.
完整代码
下面贴上修改后的完整PHP部分代码, JS就不贴了,加一个参数而已. 仅供参考:
目前为止接口运行良好, 再发现新的坑时将会更新此文章. (ps. 虽然这是篇前端分享的文章, 却是用一大堆PHP解决问题...)
本文链接:https://icewing.cc/post/about-cross-origin.html
-- EOF --
- 前端AJAX请求跨域时遇到的一些坑
- 前端AJAX请求跨域时遇到的一些坑
- ajax遇到的一些问题
- springmvc接收ajax请求参数遇到的坑
- 前端遇到的知识点有意义的一些
- ajax请求时遇到的问题
- Ajax请求Json遇到的问题总结
- Ajax请求传递参数遇到的问题
- HTML前端ajax请求
- [前端] jquery ajax请求
- 前端-ajax请求常见问题
- 前端开发遇到的一些小问题
- 工作中遇到的一些前端问题
- 前端经常遇到的一些面试题
- 遇到的一些前端JQuery问题汇总
- 使用ajax遇到的一些小问题
- Ajax中我遇到的一些问题
- AJAX (XHR)异步请求的一些认识
- (ASP.NET) 利用ueditor进行图片上传(尝试3)
- 面向对象及组件开发(三)构造函数模式
- flow2
- 大数据复习笔记(一)
- 文件打包与压缩
- 前端AJAX请求跨域时遇到的一些坑
- Android 蓝牙4.0连接几次后出现连接不了,搜索不到服务的情况
- Docker run 命令的使用方法
- 【LeetCode】60. Permutation Sequence
- Python爬虫:爬取人人都是产品经理的数据
- Dialog
- python程序:检查字符串是否是回文(2)
- hibernate.properties配置属性详解。
- 通过内存模拟硬盘实现一个简单的块设备驱动