Ajax跨域问题及解决

其他 2019-03-06 22:07:52 阅读次数: 0
版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/u014527619/article/details/79382496

跨域问题的产生

前台调用后台接口，因为前台和后台不在同一个域内产生跨越问题。

  • 浏览器限制
  • 跨域
  • XHR（XMLHttpRequest）请求

三个条件同时产生才能发生跨域问题。

解决思路

从浏览器角度解决

使用不检查跨域的方式启动浏览器

**\chrome --disable-web-security --user-data-dir=g:\temp3

不存在任何的跨域问题，可以自由访问。

此种解决方法说明，跨域是浏览器限制的行为，跟后台没有任何的关系。

针对XHR使用JSONP访问

JSONP(JSON with Padding)是JSON的一种“使用模式”，可用于解决主流浏览器的跨域数据访问的问题。
JSONP是一种约定，非官方框架。
前端使用代码

//每个测试用例的超时时间
jasmine.DEFAULT_TIMEOUT_INTERVAL = 1000;
//每个请求接口的前缀
var base = "http://localhost:8080/test";

//测试模块
describe("ajax跨域测试", function () {
    //测试方法
    it("jsonp请求", function (done) {
        //服务器返回结果
        var result;
        $.ajax({
            url: base + "/get1",
            dataType: "jsonp",
            success: function (json) {
                result = json;
            }
        });
        //由于是异步请求，需要使用setTimeout来校验
        setTimeout(function () {
            expect(result).toEqual({
                "data": "get1 ok"
            });
            //校验通过，通知jasmine框架
            done();
        }, 100);
    });
});

后端增加代码

package com.fwj.ajax;

import org.springframework.web.bind.annotation.ControllerAdvice;
import org.springframework.web.servlet.mvc.method.annotation.AbstractJsonpResponseBodyAdvice;
@ControllerAdvice
public class JsonpAdvice extends AbstractJsonpResponseBodyAdvice{
    public JsonpAdvice(){
    super("callback");
    }
}

使用Jsonp后端需要做改动，需要返回非Json对象。

关于Jsonp成功的原因

  1. jsonp发送的请求是script请求，区别于xhr请求，不存在跨域的问题。
  2. 普通的xhr请求返回的是json数据对象，jsonp返回的是一个js脚本。
  3. 请求URL的不同，请求带有callback字段


    原理：jsonp请求中，对应后台中约定的callback，json代码的内容就是callback的值作为函数名，返回的的数据作为函数的参数。

JSONP弊端

  1. 服务器端需要改动。
  2. 只支持GET方法。
  3. 发送的不是XHR请求，无法使用各种XHR各种优势。

被调用方解决跨域


需要被调用方在返回中添加指定的字段，允许对方调用。

服务器端实现

被调用发-Filter解决方案。

【简单请求】：
方法为GET,HEAD,POST,并且请求header里面无自定义头，Content-Type为text/plain,multipart/form-data,application/x-www-form-urlencoded中的一种。
浏览器对于简单是先执行拿到数据再判断。

【非简单请求】:
除简单请求之外都是非简单请求。
工作中常见的非简单请求：

  1. put.delete方法的ajax请求。
  2. 发送json格式的ajax请求。
  3. 带自定义头的ajax请求。
    浏览器对于非简单请求是先发送预检命令，然后再执行

在后端增加Filter配置，在响应头中添加需要的Header。

import javax.servlet.*;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

public class CrossFilter implements Filter {
    @Override
    public void init(FilterConfig filterConfig) throws ServletException {

    }

    @Override
    public 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(org.springframework.util.StringUtils.isEmpty(origin)){
            //允许所有的远程请求
            response.addHeader("Access-Control-Allow-Origin", "*");
        }
        String headers = request.getHeader("Access-Control-Request-Headers");
        if(org.springframework.util.StringUtils.isEmpty(headers)) {
            //允许自定义头，网页可以请求各种内容类型
            response.addHeader("Access-Control-Allow-Headers",headers);
        }
         //允许所有的请求方式
        response.addHeader("Access-Control-Allow-Methods", "*");
        //允许OPTIONS预检命令缓存3600秒
        response.addHeader("Access-Control-Max-Age","3600");
        //使Cookie生效
        response.addHeader("Access-Control-Allow-Credentials","true");
        //放行
        filterChain.doFilter(servletRequest, response);
    }

    @Override
    public void destroy() {

    }
}

将此Filter加入Spring配置文件。

package com.fwj.ajax;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.boot.web.servlet.FilterRegistrationBean;
import org.springframework.context.annotation.Bean;

@SpringBootApplication
public class AjaxApplication {

    public static void main(String[] args) {

        SpringApplication.run(AjaxApplication.class, args);
    }
    @Bean
    public FilterRegistrationBean registerFilter(){
        FilterRegistrationBean bean =new FilterRegistrationBean();
        bean.addUrlPatterns("/*");
        bean.setFilter(new CrossFilter());
        return bean;
    }
}

关于OPTIONS预检命令

OPTIONS它用于获取当前URL所支持的方法。若请求成功，则它会在HTTP头中包含一个名为“Allow”的头，值是所支持的方法，如“GET, POST”。

关于带Cookie类型的跨域

使用Cookie时"Access-Control-Allow-Methods", 不能为 *，必须使用全匹配。
Access-Control-Allow-Methods 需要为调用方的域名并且，Cookie需要存在于被调用方的域中。
并且需要设置

Access-Control-Allow-Credentials : true

前端代码如下

//测试方法
    it("getCookie请求", function (done) {
        //服务器返回结果
        var result;
        $.ajax({
            type:"get",
            url: base + "/getCookie",
            xhrFields:{
              withCredentials:true
            },
            success: function (json) {
                result = json;
            }
        });
        //由于是异步请求，需要使用setTimeout来校验
        setTimeout(function () {
            expect(result).toEqual({
                "data": "get1 ok"
            });
            //校验通过，通知jasmine框架
            done();
        }, 100);
    });

NGINX配置

配置原理图
Nginx配置原理图

server{
    listen 80;
    server_name b.com;

    location/{
        proxy_pass http://localhost:8080/;

        add_header Access-Control-Allow-Methods *;
        add_header Access-Control-Max-Age 3600;
        add_header Access-Control-Allow-Credentials true;

        add_header Access-Control-Allow-Origin $http_origin;
        add_header Access-Control-Allow-Headers &http_access_control_request_headers;
        if ($request_method = OPTIONS){
            return 3600;
        }
    }
}

nginx技巧：

//检查nginx的配置时候正确
./nginx -t

APACHE配置

略

Spring框架解决方案

在需要跨域的Controller类或者需要跨域的方法上增加注解

@CrossOrigin

调用方解决跨域

NGINX配置

使用反向代理

在调用方的nginx上增加配置

server{
    listen 80;
    server_name a.com;
    location/{
        proxy_pass http://localhost:8081/;
    }

    location/ajaxserver{
        proxy_pass http://localhost:8080/test/;
    }
}

调用方需要访问前缀地址 “/ajaxserver”

eg:http:/a.com/ajaxserver/get1

APACHE配置

略

猜你喜欢

转载自blog.csdn.net/u014527619/article/details/79382496
今日推荐
《美国对全球网络空间安全与发展的威胁和破坏》报告发布
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
周排行
让自己的头脑极度开放
CentOS 6.5(x64) 和Redhat6.5操作系误删libc
高可用注册中心
【日记】12.28/【题解】AtCoder AGC041
XML（5）_XML 约束_DTD
Java集合Map（四）
树梅派安装桌面环境教程
pipenv 的 使用和安装
小程序白屏问题和内存研究
C语言简单选择排序
每日归档
更多
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022