JSONP和CORS跨域

已于 2024-10-18 11:09:56 修改
阅读量871 收藏 2
点赞数
文章标签： 跨域 JSONP CORS
于 2023-06-29 18:08:55 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_25775675/article/details/108731686
版权
文章详细介绍了CORS和JSONP两种跨域解决方案。JSONP适用于早期浏览器，只支持GET请求，而CORS是现代的W3C标准，支持更多请求类型，但不兼容低版本浏览器。文中提供了JSONP的JavaScript和jQuery实现案例，以及CORS在普通Web项目和Spring项目中的配置示例。
摘要由CSDN通过智能技术生成

一、概述

1、跨域说明

一个域名地址由以下几个部分组成：
http://www.aaa.com:8080/s?ie=UTF-8&wd=SpringBoot

  • 协议：http
  • 域名：子域名www，主域名aaa.com
  • 端口：8080

从一个域名的网页去请求另一个域名的资源时，协议，域名，端口任意不同，都会出现跨域问题。

http://www.aaa.com:8080——>http://www.aaa.com:8080：同域访问
http://www.aaa.com:8080——>http://www.bbb.com:8080：跨域访问

2、实现跨域

cors和jsonp都是用于解决跨域问题，当两个页面的协议、域名、端口号中有一个不一致时就存在了跨域，一旦出现跨域，浏览器发送跨域请求后，请求回来的数据都会被浏览器所拦截。

注意：浏览器允许发起跨域请求，但是，跨域请求回来的数据，会被浏览器拦截，无法被页面获取到。

如何实现跨域数据请求?

现下实现跨域数据请求，最主要的两种解决方案分别是 JSONP 和 CORS 。

  1. JSONP ： 出现的早，兼容性好（兼容低版本 IE ）。是前端程序员为了解决跨域问题，被迫想出来的一种 临时解决方案，最主要的缺点 是只支持 GET 请求，不支持 POST 请求。
  2. CORS ： 出现的较晚，它是 W3C 标准，属于跨域 Ajax 请求的根本解决方案。支持 GET 和 POST 请 求。缺点 是不兼容某些低版本的浏览器。

二、JSONP简介

1、什么是JSONP

JSONP (JSON with Padding) 是 JSON 的一种“使用模式”，可用于解决主流浏览器的跨域数据访问的问题。

2、JSONP的实现原理

概念：浏览器端通过 <script> 标签的 src 属性，请求服务器上的数据，同时，服务器返回一个函数的调用。这种请求数据的方式叫做 JSONP

3、特点

JSONP 不属于真正的 Ajax 请求，因为它没有使用 XMLHttpRequest 这个对象

JSONP 仅支持 GET 请求，不支持 POST、PUT、DELETE 等请求

三、JSONP跨域

jsonp 就是能够跨域请求数据。

利用 src 可以跨域加载 js 代码。这样就可以取到js的代码，然后，在前端执行js代码即可。

在后端我们只要动态生成js代码就好了。

1、案例一（js实现）

（1）前端代码

利用script标签，加载动态生成的js代码，js会回调相应方法，并且将数据传递给回调方法。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jsonp实现案例</title>
<script type="text/javascript">
    var flightHandler = function(data){
        alert('你查询的航班结果是：票价 ' + data.price + ' 元，' + '余票 ' + data.tickets + ' 张。');
    };
    // 提供jsonp服务的url地址（不管是什么类型的地址，最终生成的返回值都是一段javascript代码）
    var url = "http://ip/WxServlet/jsonp2.js?callback=flightHandler";
    // 创建script标签，设置其属性
    var script = document.createElement('script');
    script.setAttribute('src', url);
    // 把script标签加入head，此时调用开始
    document.getElementsByTagName('head')[0].appendChild(script);
</script>
</head>
<body>
</body>
</html>

（2）后端代码

动态生成js代码，代码里放置一个回调方法。

String code = req.getParameter("code");
String collback = req.getParameter("callback");
System.out.println(code+collback);
String str = "flightHandler({\"code\": \"CA1998\",\"price\": 1780,\"tickets\": 5});";
resp.getWriter().append(str);

2、案例二（jquery实现）

（1）前端代码

接下来看下使用jquery的jsonp来实现跨域访问，例子如下：

$(function(){  
    $.ajax({  
        type: "get",  
        async: false,  
        url: "http://ip/WxServlet/jsonp2.js",  
        dataType: "jsonp",  
        jsonp: "callback",  
        jsonpCallback:"flightHandler",  
        success: function(json){  
            alert('您查询到航班信息：票价： ' + json.price + ' 元，余票： ' + json.tickets + ' 张。');  
        },  
        error: function(){  
            alert('fail');  
        }  
    });  
});

（2）后端代码

动态生成js代码，代码里放置一个回调方法。

String code = req.getParameter("code");
String collback = req.getParameter("callback");
System.out.println(code+collback);
String str = "flightHandler({\"code\": \"CA1998\",\"price\": 1780,\"tickets\": 5});";
resp.getWriter().append(str);

四、CORS简介

1、什么是CORS

  1. CORS (跨域资源共享) 由一系列 HTTP 响应头组成，这些 HTTP 响应头决定浏览器 是否阻止前端 JS 代码跨域获取资源
  2. 浏览器的同源安全策略默认会阻止网页“跨域”获取资源。但如果接口服务器配置了 CORS 相关的 HTTP 响应头，就可以解除浏览器端的跨域访问限制

2、CORS概念

CORS（Cross-Origin Resource Sharing 跨源资源共享）

当一个请求url的协议、域名、端口三者之间任意一与当前页面地址不同即为跨域。

在日常的项目开发时会不可避免的需要进行跨域操作，而在实际进行跨域请求时，经常会遇到类似 No 'Access-Control-Allow-Origin' header is present on the requested resource.这样的报错。这样的错误，一般是由于CORS跨域验证机制设置不正确导致的。

五、CORS案例

1、普通web项目

（1）添加过滤器

import javax.servlet.*;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
 
public class CORSFilter implements Filter {
 
    public void init(FilterConfig filterConfig) throws ServletException {
    }
 
    public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {
        HttpServletResponse httpResponse = (HttpServletResponse) servletResponse;
        //*表示允许所有域名跨域
        httpResponse.addHeader("Access-Control-Allow-Origin", "*");
        httpResponse.addHeader("Access-Control-Allow-Headers",
                "Origin, X-Requested-With, Content-Type, Accept");
        //允许跨域的Http方法
        httpResponse.addHeader("Access-Control-Allow-Methods", "GET,POST,PUT,DELETE");
        filterChain.doFilter(servletRequest, servletResponse);
    }
 
    public void destroy() {
    }
}

（2）web.xml配置

    <!--为了允许跨域访问-->
    <filter>
        <filter-name>CorsFilter</filter-name>
        <filter-class>org.du.personalsitemock.mockutil.CORSFilter</filter-class>
    </filter>
 
    <filter-mapping>
        <filter-name>CorsFilter</filter-name>
        <url-pattern>/*</url-pattern>
    </filter-mapping>

（3）前端代码

$.ajax({
    url: 'http://xxxx/test/cors?name=tom',
    type: 'post',
    data: '',
    //  默认情况下，标准的跨域请求是不会发送cookie的
    xhrFields: {
        withCredentials: true
    },
    success: function(rs) {
    }
})

2、Spring项目（@CrossOrigin注解）

在类或方法上添加注解即可，@CrossOrigin(origins = "*", allowCredentials = "true")。

（1）后端代码

@RestController
@CrossOrigin(origins = "*", allowCredentials = "true")
public class TestController {
    
    @RequestMapping(value = "test/cors")
    public Object cors() {
        try {
            Map<String, Object> map = getParameterMap();
            System.out.println(map.toString());
            return output(map);
        } catch (Exception e) {
            e.printStackTrace();
            return output("9999", "错误", e.getMessage());
        }
    }

}

（2）前端代码

$.ajax({
    url: 'http://xxxx/test/cors?name=tom',
    type: 'post',
    data: '',
    //  默认情况下，标准的跨域请求是不会发送cookie的
    xhrFields: {
        withCredentials: true
    },
    success: function(rs) {
    }
})

3、Spring项目（添加全局过滤器）

若项目中所有接口都允许跨域访问，可增加全局过滤器允许跨域访问。

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;

@Configuration
public class CorsConfig {
    // 当前跨域请求最大有效时长。这里默认1天
    private static final long MAX_AGE = 24 * 60 * 60;

    @Bean
    public CorsFilter corsFilter() {
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        CorsConfiguration corsConfiguration = new CorsConfiguration();
        corsConfiguration.addAllowedOrigin("*"); // 1 设置访问源地址，或者http://localhost:7060
        corsConfiguration.addAllowedHeader("*"); // 2 设置访问源请求头
        corsConfiguration.addAllowedMethod("*"); // 3 设置访问源请求方法，或设置为"GET", "POST", "DELETE", "PUT"
        corsConfiguration.setMaxAge(MAX_AGE);
        source.registerCorsConfiguration("/**", corsConfiguration); // 4 对接口配置跨域设置
        return new CorsFilter(source);
    }
}

4、Spring项目（实现WebMvcConfigurer）

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration
public class WebConfig implements WebMvcConfigurer {
    // 当前跨域请求最大有效时长。这里默认1天
    private static final long MAX_AGE = 24 * 60 * 60;

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("*")
                .allowedMethods("*")
                .allowedHeaders("*")
                .maxAge(MAX_AGE);
    }
}

5、Nginx解决跨域

如果项目中有使用Nginx来转发请求，那也可以交由Nginx来解决跨域，但是有一点需要注意：Nginx解决跨域和后端解决跨域最好只保留一个，两种混用会出现很多奇怪的问题。
下面是nginx.conf文件解决跨域的相关配置：

server {
        listen       80;
        server_name  localhost;
        location  / {
            if ($request_method = 'OPTIONS') {
                add_header Access-Control-Allow-Origin 'http://localhost:7060';
                add_header Access-Control-Allow-Headers '*';
                add_header Access-Control-Allow-Methods '*';
                add_header Access-Control-Allow-Credentials 'true';
                return 204;
            }
            if ($request_method != 'OPTIONS') {
                add_header Access-Control-Allow-Origin 'http://localhost:7060' always;
                add_header Access-Control-Allow-Credentials 'true';
            }
            proxy_pass  http://localhost:59200; 
        }
    }

6、参考

CrossOrigin注解没有生效，解决方案集合
https://blog.csdn.net/suxiexingchen/article/details/104861803

CrossOrigin注解没有生效，解决方案集合
https://suxiexingchen.github.io/2020/03/14/36/

ajax携带cookie的两种方式
https://www.cnblogs.com/lgl1209/p/11527080.html

六、参考

9种常见的前端跨域解决方案（详解）
https://www.imooc.com/article/291931

CORS和JSONP的区别，如何解决跨域问题？
https://blog.csdn.net/SunFlower914/article/details/120691847

java web服务器实现跨域访问
https://www.iteye.com/blog/yjph83-2253863

菜鸟小窝
关注
跨域之 JSONP 与 CORS
zhang6223284的博客
08-05 781
前言 什么是跨域 JSONP CORS 简单请求与非简单请求 简单请求 非简单请求 预检请求 预检请求的回应 浏览器的正常请求和回应 区别 总结及面试 前言 跨域问题是前端经常遇到的问题，并且也是面试的时候面试官会经常问到的问题，那么今天就来总结一下跨域及跨域的几种方式。 什么是跨域 跨域问题的出现主要是因为浏览器的同源策略，即浏览器只能访问与包含它的页面处...
跨域请求资源-jsonp和cors区别
ranweidaoke的博客
04-09 1087
JSONP的原理：动态创建script标签；JSONP发送的不是Ajax请求不支持 Post 请求；CORS中文意思是跨域资源共享,需要服务器端进行CORS配置；CORS 发送的是真正的Ajax请求CORS 支持Ajax的跨域如果要启用 CORS 跨域资源共享，关键在于 服务器端，只要 服务器支持CORS跨域资源共享，则 浏览器肯定能够正常访问 这种 CORS 接口；而且，客户端在 发送 Ajax的时候，就像发送普通AJax一样，没有任何代码上的变化；
cors与jsonp
weixin_30924087的博客
03-19 310
在.net中，可以在webApiConfig代码里写，也可以在web.config里配置，但都需要引入System.Web.Cors。这些都是服务器端的配置，对整个项目有效。 {若只想对某个请求有效，也可以在此次请求中的响应头中设置HttpContext.Current.Response.Headers.Set("Access-Control-Allow-Credentials", "tr...
前端两种解决跨域方式+调用聚合数据API
最新发布
wxt_1005的博客
09-28 423
前端两种解决跨域+调用聚合数据API
跨域请求解决方法(JSONP, CORS)
热门推荐
CloudCraft的专栏
05-28 3万+
一个众所周知的问题，Ajax直接请求普通文件存在跨域无权限访问的问题。解决方法有JSONP，Flash等等。 JSONP 我们发现，Web页面上调用js文件时不受是否跨域的影响，凡是拥有"src"这个属性的标签都拥有跨域的能力，比如、、。那就是说如果要跨域访问数据，就服务端只能把数据放在js格式的文件里。恰巧我们知道JSON可以简洁的描述复杂数据，而且JSON还被js原生支持，所以在客户端几乎
说说CORS与jsonp
weixin_34007020的博客
04-16 228
前言 浏览器出于防止潜在安全风险的考虑，使用了同源策略，这一方面保证了我们数据的安全， 另一方面却又限制了我们的手脚，基于此，开发者们与标准制定组织提供了不同的解决方案， 这里主要说说CORS与jsonp。 什么是同源策略 同源指的是两个域需要协议，子域名，主域名与端口号都保持一致，四者有一个不同，即属于跨域。 注意: http://localhost:8080与http://127.0.0.1...
JavaScript跨域问题之CORS方法与JSONP的对比
IT_caainiao的博客
10-31 3193
什么是跨域？ 只要协议、域名、端口有任何一个不同，都会被当成不同的域。而JavaScript同源政策的限制，无法进行跨域调用解决方法： 1.跨域资源共享（CORS）: 定义了在访问跨域资源时，浏览器与服务器应该如何沟通。背后的基本思想就是使用自定义的HTTP头部让浏览器与服务器进行沟通，从而决定请求或响应是应该成功还是失败。 服务器对于CORS的支持，主要通过设置
跨域解决之JSONP和CORS的详细介绍
01-19
JSONP跨域和CORS跨域 什么是跨域？ 跨域：指的是浏览器不能执行其它网站的脚本，它是由浏览器的同源策略造成的，是浏览器的安全限制！ 同源策略 同源策略：域名、协议、端口均相同。 浏览器执行JavaScript脚本时，会...
SpringBoot跨域Jsonp和Cors的方法
10-16
本文将深入探讨如何在SpringBoot框架中解决跨域问题，主要涉及两种方法：JSONP和CORS。 ### JSONP(JSON with Padding) JSONP是一种解决跨域问题的早期方案，它利用了`<script>`标签的`src`属性不受同源策略限制的...
js实现跨域的几种方法汇总（图片ping、JSONP和CORS）
11-22
本文将重点介绍三种常用的方法：图片ping、JSONP以及CORS。 1. **图片ping**： 图片ping利用了HTML `<img>` 元素的特性，它可以不受同源策略限制，从任意URL加载图片。通过创建一个新的`<img>`元素并设置其`src`...
网络安全-实战篇 跨域漏洞丨JSONP和CORS跨域资源共享
Coisini的博客
05-29 723
进入正文之前，我们先来解决个小问题，什么是跨域？ 跨域：指的是浏览器不能执行其它网站的脚本，它是由浏览器的同源策略造成的，是浏览器的安全限制！ 跨域常见的两种方式，分别是JSONP和CORS。 今天i春秋以JSONP和CORS这两个知识点，分享一篇比较基础的跨域漏洞知识点，希望能够抛砖引玉。 JSONP跨域 JSONP（JSON with padding），是一种利用HTML中元素标签，远程调用...
前端跨域整理
weixin_34409822的博客
10-30 188
前言 原文地址：前端跨域总结 博主博客地址：Damonare的个人博客 相信每一个前端er对于跨域这两个字都不会陌生，在实际项目中应用也是比较多的。但跨域方法的多种多样实在让人目不暇接。老规矩，碰到这种情况，就只能自己总结一篇博客，作为记录。 正文 1. 什么是跨域？ 跨域一词从字面意思看，就是跨域名嘛，但实际上跨域的范围绝对不止那么狭隘...
jsonp和cors方式
公众号shadow sock7
08-17 652
环境 8082 目录/var/www/exercise2 192.168.170.199:8082下index.html &amp;lt;html&amp;gt; &amp;lt;head&amp;gt; &amp;lt;script src=&quot;http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js&quot;&amp;gt; &amp;l
JSONP跨域和CORS跨域
babx64703的博客
05-31 181
什么是跨域？ 跨域：指的是浏览器不能执行其它网站的脚本，它是由浏览器的同源策略造成的，是浏览器的安全限制！ 同源策略 同源策略：域名、协议、端口均相同。 浏览器执行JavaScript脚本时，会检查这个脚本属于那个页面，如果不是同源页面，就不会被执行。 JSONP跨域 只支持GET请求，不支持POST等其它请求，也不支持复杂请求，只支持简单请求。 CORS跨域 支持所有的...
跨域及jsonp
yc123h的博客
05-07 1017
欢迎访文我的博客YangChen’s Blog昨天参加了网易的前端开发实习生面试，分为两次技术面试和一次HR面试，PS.网易的校招和面试效率还是挺高的。这两次技术面试都问到了跨域及jsonp的问题，所以呢就为此写一下吧，这也是前端开发中绕不过的一个重点。什么是跨域？要解释跨域，就要先说明下什么是域？域的英文名是Domain，百度百科给的定义是: 域(Domain)是Windows网络中独立运行的
jsonp跨域
画个圆圆的地球
12-06 3843
jsonp跨域
JSONP和cors跨域问题
weixin_42201272的博客
02-20 168
一、JSONP 假设：有两台服务器，s1的客户端需要s2后台的一些数据，请求和响应的过程如下： s1服务器，后台代码如下 const express = require(‘express’) const app = express(); const path = require(‘path’) //静态资源访问 app.use(express.static(path.join(__dirname,...
跨域与JSONP,CORS
weixin_44863645的博客
04-22 333
文章目录一、同源策略1.什么是同源2.什么是同源策略二、跨域1.什么是跨域2.浏览器对跨域请求的拦截3.如何实现跨域数据请求三、JSONP1.JSONP的实现原理2.自己实现一个简单的JSONP3.JSONP的缺点4.jQuery中的JSONP5.自定义参数及回调函数名称6.jQuery中的JSONP的实现过程二、使用步骤1.引入库2.读入数据总结 一、同源策略 1.什么是同源 如果两个页面的协议，域名和端口都相同，则两个页面具有相同的源 类似于怎么知道两个人是不是老乡，相同省？相同市？ 怎么知道两个页面来
跨域问题--jsonp&cors
ShuaideryiP的博客
09-18 177
1. 跨域访问接口-整体说明 跨域问题是我们前端开发中经常会遇到的问题，也是面试中的高频题。通过这一节的学习，我们就能解决这类问题啦。 主要内容： 素材准备 错误原因分析 用JSONP来解决 用CORS来解决 2. 跨域-素材准备及错误展示 2.1 目录结构 |-public |-------index.html |-server.js 2.2 前端页面 public/index.html <!DOCTYPE html> &lt...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值