什么是跨域

**什么是跨域，如何实现跨域访问

1.1先聊聊什么是同源策略
规定：如果浏览器的地址与Ajax的请求地址协议名称：//域名地址：端口号如果都相同则满足同源策略，浏览器可以正常的解析返回值；如果三者之间有一个不同，则违反了同源策略，浏览器就不会解析返回值

1.2什么是跨域
由于业务需要,通常A服务器中的数据可能来源于B服务器. 当浏览器通过网址解析页面时,如果页面内部发起ajax请求.如果浏览器的访问地址与Ajax访问地址不满足同源策略时,则称之为跨域请求.
跨域要素:
1.浏览器
2.解析ajax
3.违反了同源策略

2如何实现跨域访问 （JSONP）
2.1 JSONP跨域访问
2.1.1JSONP介绍
JSONP(JSON with Padding)是JSON的一种“使用模式”，可用于解决主流浏览器的跨域数据访问的问题。由于同源策略，一般来说位于 server1.example.com 的网页无法与不是 server1.example.com的服务器沟通，而 HTML 的
2.1.2JSON原理说明
1.它利用了javaScript中的src属性可以跨域访问。

2.提前准备一个回调函数callback（）
/*定义回调函数 */
function hello(data){
alert(data.name);
}

3.将返回值结果运用特殊的格式封装。callback（JSON数据）
hello({“id”:“1”,“name”:“tom”})

2.2 JSONP高级API
2.2.1编辑前端WEB页面

JSON跨域请求测试

2.2.2JSONP页面请求分析

2.2.3编辑后端服务器

package com.jt.web;

import com.fasterxml.jackson.databind.util.JSONPObject;
import com.jt.pojo.ItemDesc;
import com.jt.util.ObjectMapperUtil;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
public class WebJSONPController {

/**
 * 完成JSONP跨域访问
 * url地址: http://manage.jt.com/web/testJSONP?callback=hello&_=1605584709377
 * 参数:    callback 回调函数的名称
 * 返回值:  callback(json)
 */
@RequestMapping("/web/testJSONP")
public JSONPObject testJSONP(String callback){
    ItemDesc itemDesc = new ItemDesc();
    itemDesc.setItemId(1000L).setItemDesc("JSONP远程调用!!!");
    JSONPObject jsonpObject = new JSONPObject(callback, itemDesc);
    return jsonpObject;
}

}

JSONP测试完成！

3.CORS跨域实现
3.1CORS介绍
因为出于安全的考虑, 浏览器不允许Ajax调用当前源之外的资源. 即浏览器的同源策略.
CORS需要浏览器和服务器同时支持。目前，所有主流浏览器都支持该功能，IE浏览器不能低于IE10。在浏览器端, 整个CORS通信过程都是浏览器自动完成，在请求之中添加响应头信息,如果服务器允许执行跨域访问.,则浏览器的同源策略放行.

3.2跨域检验 （没有进行服务器配置之前）
说明: 由www.jt.com/test.html访问页面,之后内部由ajax发起请求. 得到如图的信息.信息中显示,几乎所有的浏览器都兼容CORS的方式,但是由于服务器不允许跨域,所以请求被拒.

3.3配置后端服务器

由于跨域需求其他的服务器也会需要跨域.所以在jt-common中添加跨域的配置
package com.jt.config;

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

/**

• 完成CORS跨域配置: 实现思路在请求的响应头中添加访问信息.
  */
  @Configuration
  public class CORSConfig implements WebMvcConfigurer{//web项目的全局配置的接口.

  /**

  • 参数介绍:

  •  1.addMapping()  哪些请求可以进行跨域操作
    

  •    addMapping("/**")   表示所有访问后端的服务器的请求都允许跨域
    

  •    addMapping("/addUser/**")  表示部分请求可以跨域
    

  •    /*       只能拦截一级目录
    

  •    /**      可以拦截多级目录
    

  •  2.allowedOrigins("*")  允许哪些网站跨域
    

  •  3.allowCredentials(true)  请求跨域时是否允许携带Cookie/Session相关
    

  • @param registry
    /
    @Override
    public void addCorsMappings(CorsRegistry registry) {
    registry.addMapping("/**")
    .allowedOrigins("")
    .allowCredentials(true);
    //.maxAge(); 默认30分钟 是否允许跨域请求 30分钟之内不会再次验证
    //.allowedMethods() 允许请求类型
    }
    }

3.4响应信息

4.跨域总结
1.什么叫跨域 浏览器解析Ajax时,发起url请求违反了同源策略时,称之为跨域.
2.什么时候用跨域 一般A服务器需要从B服务器中获取数据时,可以采用跨域的方式.
3.什么是JSONP JSONP是JSON的一种使用模式 利用javaScript中的src属性进行跨域请求.(2.自定义回调函数,3.将返回值进行特殊格式封装)
4.什么是CORS CORS是当前实现跨域的主流方式,现在所有的主流浏览器都支持,需要在服务器端配置是否允许跨域的配置. 只要配置了(在响应头中添加允许跨域的标识),则同源策略不生效,则可以实现跨域.