Ajax跨域的原因

浏览器限制
跨域（协议、主机名、端口有一个不同就会产生跨域）
xhr请求（XMLHttpRequest）
当以上三个条件同时满足时才会产生ajax跨域

Ajax跨域的解决方案

只要破坏上述三个条件之一就可以解决跨域问题

浏览器的启动参数上来设置，使浏览器不做跨域校验（不常用）
以谷歌浏览器为例，在chrome.exe所在的路径按下shift键，点击右键，点击“在此处打开命令行窗口”，然后输入chrome --disable-web-security就可以了，此方法不常用，因为需要在客户端操作，而大多数用户是不会操作的

xhr解决==》jsonp（不常用）
以下是谷歌浏览器中如何查看是否xhr请求（按F12，然后在弹出框中点击NetWork的All）

使用jsonp来传输，jsonp会把动态创建script标签来进行请求，而对于服务器后台返回的数据用scprit标签形式进行解析（此时后台必须进行改动返回jsonp数据，否则前台会解析异常）

js代码：

$.ajax({url: "http://localhost:8080/ajaxTest",dataType: "jsonp",jsonp: "callback",        // 此处的字段应和后台统一，否则不会返回jsonp格式success: function (json) {alert(json)}})

后台接口：

@RequestMapping(value = "/ajaxTest")
public Result ajaxTest(){System.out.println("ajaxtest方法被调用了");return ResultUtil.success();
}

浏览器控制台：

Uncaught SyntaxError: Unexpected token（这里是解析异常）

服务器给出的json数据依旧能拿到，但控制台会报出解析异常，因为Jsonp解析的是script字段，此时应对后台接口进行改动（此处改动是基于springboot的）：

import org.springframework.web.bind.annotation.ControllerAdvice;
import org.springframework.web.servlet.mvc.method.annotation.AbstractJsonpResponseBodyAdvice;  @ControllerAdvice
// AbstractJsonpResponseBodyAdvice在Springboot 2.x已废弃
public class JsonpAdvice extends AbstractJsonpResponseBodyAdvice{  public JsonpAdvice() {  super("callback");         //  此处字段和上边Ajax的jsonp应统一}
}

jsonp的弊端：

服务器代码需要改动（自己的项目可以改，如果是别人的项目那就。。。）
只能支持get请求（请求和返回的都是script代码）
不是xhr请求

跨域方面解决（常用）
对于跨域的请求，浏览器会在请求头上加上Origin，而在服务器返回数据时判断响应头有无跨域信息，若没有则会报错

被调用方解决跨域：
1. 服务器端实现
  使用Filter来进行处理

     // 注册filter@Beanpublic FilterRegistrationBean registerFilter(){FilterRegistrationBean bean = new FilterRegistrationBean();// 设置所有请求都经过过滤器bean.addUrlPatterns("/*");// 设置添加的过滤器bean.setFilter(new CrosFilter());return bean;}

     public class CrosFilter implements Filter {@Overridepublic void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {HttpServletResponse response = (HttpServletResponse)servletResponse;// 设定允许请求的域response.addHeader("Access-Control-Allow-Origin","*");// 设定允许请求的头(简单请求不需要加，非简单请求需要带上)response.addHeader("Access-Control-Allow-Headers","*");// 设定允许请求的方法response.addHeader("Access-Control-Allow-Methods","*");}@Overridepublic void init(FilterConfig filterConfig) throws ServletException {}@Overridepublic void destroy() {}}

带cookie的跨域filter设置(对于带自定义请求头的跨域，只许要在过滤器返回中添加对应请求头)

public class CrosFilter implements Filter {@Overridepublic void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {HttpServletResponse response = (HttpServletResponse)servletResponse;HttpServletRequest request = (HttpServletRequest)servletRequest;String origin = request.getHeader("Origin");if(!StringUtils.isEmpty(origin)){// 设定允许请求的域response.addHeader("Access-Control-Allow-Origin",origin);}// 设定允许请求的头response.addHeader("Access-Control-Allow-Headers","Content-Type");// 设定允许请求的方法response.addHeader("Access-Control-Allow-Methods","*");response.addHeader("Access-Control-Max-Age","3600");filterChain.doFilter(servletRequest,servletResponse);}@Overridepublic void init(FilterConfig filterConfig) throws ServletException {}@Overridepublic void destroy() {}
}

Nginx配置
待添加—
Apache配置
待添加----
spring框架的跨域注解
@CrossOrgin
可以加在类或方法上来解决跨域

调用方解决
Nginx反向代理
Apache方向代理

参考： https://www.imooc.com/learn/947

关于Ajax跨域的解决方案相关推荐

PHP下ajax跨域的解决方案之CORS
PHP下ajax跨域的解决方案之CORS 参考文章: (1)PHP下ajax跨域的解决方案之CORS (2)https://www.cnblogs.com/jkko123/p/6294625.html ...
【JS】AJAX跨域-JSONP解决方案（一）
[JS]AJAX跨域-JSONP解决方案(一) 参考文章: (1)[JS]AJAX跨域-JSONP解决方案(一) (2)https://www.cnblogs.com/h--d/p/11470534. ...
ajax中cors解决跨域,AJAX 跨域 CORS 解决方案
两种跨域方法在 Javascript 中跨域访问是比较常见的事情就像现在比较流行写单页应用,而单页应用在访问 API 的时候就会有跨域的问题要解决跨域的问题,其实也并不复杂,有两种方案可以选择 ...
js ajax 跨域问题解决方案
什么是跨域问题? 跨域问题来源于JavaScript的"同源策略",即只有协议+主机名+端口号 (如存在)相同,则允许相互访问.也就是说JavaScript只能访问和操作自己域下 ...
ajax跨越html,ajax跨域的解决方案
什么是跨域跨域问题产生的原因,是由于浏览器的安全机制,JS只能访问与所在页面同一个域(相同协议.域名.端口)的内容(参考js的同源策略). 但是我们项目开发过程中,经常会遇到在一个页面的JS代码中, ...
ajax跨域情况解决方案,ajax跨域解决方案.docx
ajax跨域解决方案 ajax跨域解决方案篇一:使用JSONP解决Ajax跨域访问问题使用JSONP解决Ajax跨域访问问题 JSONP(JSON with Padding)是JSON的一种&qu ...
ajax跨域问题解决方案
今天来记录一下关于ajax跨域的一些问题.以备不时之需. 跨域同源策略限制同源策略阻止从一个域上加载的脚本获取或操作另一个域上的文档属性.也就是说,受到请求的 URL 的域必须与当前 Web 页面 ...
Ajax跨域请求解决方案——jsonp
转自:http://www.cnblogs.com/dowinning/archive/2012/04/19/json-jsonp-jquery.html 1.一个众所周知的问题,Ajax直接请求普通 ...
Ajax跨域及解决方案
了解跨域之前,我们要了解浏览器的同源策略同源策略(英文全称 Same origin policy)是浏览器提供的一个安全功能通俗的理解:浏览器规定,A 网站的 JavaScript,不允许和非同源 ...

关于Ajax跨域的解决方案

关于Ajax跨域的解决方案和一些个人理解

Ajax跨域的原因

Ajax跨域的解决方案

关于Ajax跨域的解决方案相关推荐

最新文章

热门文章