ajax跨域问题小结
跨域:跨域名的访问,是浏览器对ajax的一种限制,这样可以有效的防止跨站攻击
跨域的范畴: 域名不同 或 端口不同 或 二级域名不同
解决方案:
第一种:由于前端基础薄弱,且该方式老掉牙,不讲解;
第二种:利用nginx的反向代理,使得我们表面发送不跨域的请求,实际代理了跨域,配置nginx相关配置即可;
第三种:CORS,规范化的跨域请求解决方案,在服务端进行控制是否允许跨域;
详解:浏览器会将ajax请求分为两类,其处理方案略有差异:简单请求、特殊请求。
简单请求:
请求方法为 : head get post
Http的头信息不能超过以下几种字段:Accept Accept-Language Content-Language Last-Event-ID Content-Type
当浏览器发现发现的ajax请求是简单请求时,会在请求头中携带一个字段:Origin,
该字段指出当前请求属于哪个域(协议+域名+端口),允许跨域否由服务器决定
如果服务器允许跨域,需要在返回的响应头中携带下面信息
- Access-Control-Allow-Origin: http://manage.hahaha.com //可接受的域,是一个具体域名或者*,代表任意
- Access-Control-Allow-Credentials: true //是否允许携带cookie,默认情况下,cors不会携带cookie,除非这个值是true
- Content-Type: text/html; charset=utf-8
如果跨域请求要想操作cookie,需要满足3个条件:
服务的响应头中需要携带Access-Control-Allow-Credentials并且为true。
浏览器发起ajax需要指定withCredentials 为true
响应头中的Access-Control-Allow-Origin一定不能为*,必须是指定的域名
复杂请求:
请求方式: put
浏览器先询问服务器,发起预检请求,当前网页所在的域名是否在服务器的许可名单之中,
以及可以使用哪些HTTP动词和头信息字段。只有得到肯定答复,浏览器才会发出正式的XMLHttpRequest
请求
java实现: 服务端可以通过拦截器统一实现,SpringMVC已经帮我们写好了CORS的跨域过滤器:CorsFilter
- @Configuration
- public class GlobalCorsConfig {
- @Bean
- public CorsFilter corsFilter() {
- //1.添加CORS配置信息
- CorsConfiguration config = new CorsConfiguration();
- //1) 允许的域,不要写*,否则cookie就无法使用了
- config.addAllowedOrigin("http://manage.hahaha.com");
- //2) 是否发送Cookie信息
- config.setAllowCredentials(true);
- //3) 允许的请求方式
- config.addAllowedMethod("OPTIONS");
- config.addAllowedMethod("HEAD");
- config.addAllowedMethod("GET");
- config.addAllowedMethod("PUT");
- config.addAllowedMethod("POST");
- config.addAllowedMethod("DELETE");
- config.addAllowedMethod("PATCH");
- // 4)允许的头信息
- config.addAllowedHeader("*");
- //2.添加映射路径,我们拦截一切请求
- UrlBasedCorsConfigurationSource configSource = new UrlBasedCorsConfigurationSource();
- configSource.registerCorsConfiguration("/**", config);
- //3.返回新的CorsFilter.
- return new CorsFilter(configSource);
- }
- }
摘自--某某笔记
ajax跨域问题小结的更多相关文章
- AJAX跨域调用相关知识-CORS和JSONP(引)
AJAX跨域调用相关知识-CORS和JSONP 1.什么是跨域 跨域问题产生的原因,是由于浏览器的安全机制,JS只能访问与所在页面同一个域(相同协议.域名.端口)的内容. 但是我们项目开发过程中,经常 ...
- JQuery.Ajax + 跨域 (crossDomain) + POST + JSON + WCF RESTful, 5大陷阱和解决方案
JQuery.Ajax + 跨域 (crossDomain) + POST + JSON + WCF RESTful, 5大陷阱和解决方案 最近在开发WSS RESTful服务的时候, 碰到了这些个纠 ...
- Ajax跨域问题及解决方案
目录 复现Ajax跨域问题 Ajax跨域介绍 Ajax跨域解决方案 一. 在服务端添加响应头Access-Control-Allow-Origin 二. 使用JSONP解决 小结 复现Ajax跨域问题 ...
- ajax跨域访问总结
1,jsonp的使用 就是script引用别的站点js,利用回调把内容传给这个js。 a需要引入b,在页面上引入b的js,里面有b的函数,在a中执行,就能拿到json了。 程序B中test.js的代码 ...
- java、ajax 跨域请求解决方案('Access-Control-Allow-Origin' header is present on the requested resource. Origin '请求源' is therefore not allowed access.)
1.情景展示 ajax调取java服务器请求报错 报错信息如下: 'Access-Control-Allow-Origin' header is present on the requested ...
- Ajax跨域问题及解决方案 asp.net core 系列之允许跨越访问(Enable Cross-Origin Requests:CORS) c#中的Cache缓存技术 C#中的Cookie C#串口扫描枪的简单实现 c#Socket服务器与客户端的开发(2)
Ajax跨域问题及解决方案 目录 复现Ajax跨域问题 Ajax跨域介绍 Ajax跨域解决方案 一. 在服务端添加响应头Access-Control-Allow-Origin 二. 使用JSONP ...
- Laravel中的ajax跨域请求
最近接触Laravel框架ajax跨域请求的过程中遇到一些问题,在这里做下总结. 一开始发起ajax请求一直报500错误,搜索相关资料后发现Laravel要允许跨域请求可以加入Cors中间件,代码如下 ...
- Ajax操作如何实现跨域请求 (JSONP和CORS实现Ajax跨域的原理)
由于浏览器存在同源策略机制,同源策略阻止ajax (XMLHttpRequest) 从一个源加载的文档或脚本获取或设置另一个源加载的文档的属性. 特别的:由于同源策略是浏览器的限制,所以请求的发送和响 ...
- Ajax跨域问题的两种解决方法
浏览器不允许Ajax跨站请求,所以存在Ajax跨域问题,目前主要有两种办法解决. 1.在请求页面上使用Access-Control-Allow-Origin标头. 使用如下标头可以接受全部网站请求: ...
随机推荐
- __module__ 和 __class__
__module__ 查看当前方法来之于那个文件 __class__ 查看当前方法来之于那个类
- 003之MFCSocket异步编程(指针机制)
002篇是采用传统方式创建,不适应动态的网络环境,服务器为客户端保留着断开连接时的套接字,不够灵活.而采用指针机制不仅可以更加灵活性,而且能使代码更集中,更具有条理性.将其转变成指针机制.功能及运行保 ...
- maven学习-基本入门用法
一.下载及安装 1.1 下载maven 3.1.1 先到官网http://maven.apache.org/download.cgi 下载最新版本(目前是3.1.1 ),下载完成后,解压到某个目录(本 ...
- centos7下 nginx配置upstream 不能直接代理到本机tomcat的解决
Nginx代理本地tomcat时404. upstream是直接配置server localhost:10000 的.单独访问tomcat是可以的. 查看/var/log/nginx/error.lo ...
- TXLSReadWriteII2 读取数据
TXLSReadWriteII2 按行读取数据(写得复杂了点,实际项目中的,可以自己简化) procedure TformMain.LoadGeneralObject(_type, _col, _ro ...
- ELK-WEB中文汉化和安全认证
1.Kibana汉化方法此项目,适用于Kibana 5.x-6.x的任意版本,汉化过程不可逆 1)Github仓库下载kibana中文汉化包,下载指令如下: git clone https://git ...
- PhoenixFD插件流体模拟——UI布局【Simulation】详解
前言 之前使用RealFlow做流体模拟,但是总得和3ds导来导去,略显麻烦,特意学习PhoenixFD插件,直接在3ds中进行流体模拟.若读者有更好的流体模拟方法,欢迎在评论区交流. 原文地址:ht ...
- 数据库类型空间效率探索(五)- decimal/float/double/varchar
以下测试为userinfo增加一列,列类型分别为decimal.float.double.varchar.由于innodb不支持optimize,所以每次测试,都会删除表test.userinfo,重 ...
- 8. String to Integer (atoi) 字符串转成整数
[抄题]: Input: "42" Output: 42 Example 2: Input: " -42" Output: -42 Explanation: T ...
- Ubuntu 18.04学习笔记
命令行快捷键 https://blog.csdn.net/wanlhr/article/details/80926804 Ubuntu18.04使用vi命令修改文件并保存 vi /opt/teamvi ...