ajax中跨域--cors和jsonp

最新推荐文章于 2022-01-12 20:38:24 发布

nickel369

最新推荐文章于 2022-01-12 20:38:24 发布

阅读量142

点赞数

文章标签： jsonp ajax

本文链接：https://blog.csdn.net/nickel369/article/details/107669695

版权

跨域

1.什么叫跨域？

在这里插入图片描述
跨域：通过一台服务器访问另外一台服务器中的资源，这样就构成了跨域。跨域经常出现的场景是协议、子域名、主域名、端口号四者中有一个不相同就构成跨域的条件。

2. 常见跨域场景

当协议、子域名、主域名、端口号中任意一个不相同时，都算作不同域。不同域之间相互请求资源，就算作“跨域”。常见跨域场景如下图所示：
在这里插入图片描述

3.跨域页面案例

在这里插入图片描述

cors跨域相关的配置

1.cors跨域的介绍

CORS是当下主流的一种跨域的访问形式,当下几乎所有的主流的浏览器其实都可以进行跨域的访问.浏览器在发起跨域的访问时新增一个请求头信息,来标识跨域访问.

2.cors跨域

2.1页面演示

在这里插入图片描述
cors跨域的页面：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Cors跨域访问的测试</title>
		<script type="text/javascript" src="/js/jquery.min.js"></script>
	</head>
	<body>
	     <button id="btn1">点击进行本地访问</button>
	     <button id="btn2">Cors访问的测试</button>
	</body>
	<script type="text/javascript">
	    $("#btn1").click(function(){
	    	$.ajax({
	    	  type:"GET",
	    	  url:"http://127.0.0.1:8092/test",
	    	  success:function(data){
	    		  alert(data);
	    	  }
	    	});
	    });
	  
	    $("#btn2").click(function(){
	    	$.ajax({
	    	  type:"GET",
	    	  url:"http://127.0.0.1:8091/test",
	    	  success:function(data){
	    		  alert(data);
	    	  }
	    	});
	    });
	</script>
</html>

2.2 配置cors跨域配置文件

package com.nq.conf;
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 CorsConfig implements WebMvcConfigurer{
	@Override
	public void addCorsMappings(CorsRegistry registry) {
		registry.addMapping("/**")
		.allowedOrigins("*")   //配置源 通配
		.allowedMethods("GET","POST","PUT","DELETE","HEAD") //允许的请求方式
		.allowCredentials(true)		//是否允许携带cookie
		.maxAge(1800);				//允许跨域的持续时间
	}
}

2.3 配置cors的controller

package com.nq.controller;

import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
public class TestServerController {
	@RequestMapping("/test")
	public String test() {
		return "主服务器测试成功";
	}
}

jsonp跨域相关的配置

1.jsonp网页配置

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Insert title here</title>
		<script type="text/javascript" src="js/jquery.min.js"></script>
	</head>
	<body>
	    <button id="btn1">测试jsonp跨域</button>
	</body>
	<script type="text/javascript">
	  $("#btn1").click(function(){
		  $.ajax({
	    	   dataType:"jsonp",
	    	   url:"http://127.0.0.1:8091/jsonp",
	    	   success:function(data){
	    		   alert(data);
	    	   }
	       });
	  });   
	</script>
</html>

2.配置controller

package com.nq.controller;

import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import com.fasterxml.jackson.databind.util.JSONPObject;
@RestController
public class TestServerController {
	@RequestMapping("/test")
	public String test() {
		
		return "主服务器测试成功";
	}
	
	@RequestMapping("/jsonp")
	public JSONPObject testJsonp(String callback) {
		return new JSONPObject(callback, "jsonp测试成功！");
	}
}

nickel369

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ajax中跨域--cors和jsonp

跨域1.什么叫跨域？跨域：通过一台服务器访问另外一台服务器中的资源，这样就构成了跨域。跨域经常出现的场景是协议、子域名、主域名、端口号四者中有一个不相同就构成跨域的条件。2. 常见跨域场景当协议、子域名、主域名、端口号中任意一个不相同时，都算作不同域。不同域之间相互请求资源，就算作“跨域”。常见跨域场景如下图所示：3.跨域页面案例cors跨域相关的配置1.cors跨域的介绍CORS是当下主流的一种跨域的访问形式,当下几乎所有的主流的浏览器其实都可以进行跨域的访问.浏览器在发起跨域的访问
复制链接

扫一扫