简单了解跨域问题

最新推荐文章于 2024-07-06 09:00:00 发布

金清泽

最新推荐文章于 2024-07-06 09:00:00 发布

阅读量482

点赞数

分类专栏：补充知识文章标签： javascript 前端 http

本文链接：https://blog.csdn.net/m0_53752829/article/details/122644398

版权

补充知识专栏收录该内容

15 篇文章 0 订阅

订阅专栏

学习目标：

简单了解跨域问题

学习内容：

1、什么是跨域 2、为什么要限制跨域 3、为什么要跨域 4、跨域的解决方案

学习时间：

2021年12月28日

学习产出：

1、技术笔记 1 遍 2、CSDN 技术博客 1 篇

什么是跨域

跨域是指从一个域名的网页去请求另一个域名的资源。比如从www.baidu.com 页面去请求 www.google.com 的资源。但是一般情况下不能这么做，它是由浏览器的同源策略造成的，是浏览器[JavaScript施加的安全限制。跨域的严格一点的定义是：只要协议，域名，端口有任何一个的不同，就被当作是跨域.

所谓同源是指，域名，协议，端口均相同，只要有一个不同，就是跨域.

URL	说明	是否允许通信
http://www.a.com/a.js http://www.a.com/b.js	同一域名下	允许
http://www.a.com/lab/a.js http://www.a.com/script/b.js	同一域名下不同文件夹	允许
http://www.a.com:8000/a.js http://www.a.com/b.js	同一域名，不同端口	不允许
http://www.a.com/a.js https://www.a.com/b.js	同一域名，不同协议	不允许
http://www.a.com/a.js http://script.a.com/b.js	主域相同，子域不同	不允许
http://www.a.com/a.js http://a.com/b.js	同一域名，不同二级域名（同上）	不允许（cookie这种情况下也不允许访问）
http://www.cnblogs.com/a.js http://www.a.com/b.js	不同域名	不允许

为什么浏览器要限制跨域访问呢？

原因就是安全问题：如果一个网页可以随意地访问另外一个网站的资源，那么就有可能在客户完全不知情的情况下出现安全问题。比如下面的操作就有安全问题：

1.用户访问www.mybank.com ，登陆并进行网银操作，这时cookie啥的都生成并存放在浏览器

2.用户突然想起件事，并迷迷糊糊地访问了一个邪恶的网站 www.xiee.com

这时该网站就可以在它的页面中，拿到银行的cookie，比如用户名，登陆token等，然后发起对www.mybank.com 的操作。

3.如果这时浏览器不予限制，并且银行也没有做响应的安全处理的话，那么用户的信息有可能就这么泄露了。

为什么要跨域？

既然有安全问题，那为什么又要跨域呢？有时公司内部有多个不同的子域，比如一个是location.company.com ,而应用是放在app.company.com , 这时想从 app.company.com去访问 location.company.com 的资源就属于跨域。

解决方法

可以通过前端和后端进行解决，前端的跨域解决方案有很多种，这里举例一种后端的解决方案

跨域资源共享（CORS）

W3C 的 Web 工作组推荐了一种新的机制，即跨域资源共享（Cross-origin Resource Sharing），简称CORS。其实这个机制就是实现了跨站访问控制，使得安全地进行跨站数据传输成为可能。

服务器端对于CORS的支持，主要就是通过设置Access-Control-Allow-Origin来进行的。如果浏览器检测到相应的设置，就可以允许Ajax进行跨域的访问。

只需要在后台中加上响应头来允许域请求！在被请求的Response header中加入以下设置，就可以实现跨域访问了！

Spring项目中的解决方法:

方式1：手工设置响应头（HttpServletResponse ）

方式2：使用注解（@CrossOrigin）

方式3：返回新的CorsFilter

1.手工设置响应头（局部跨域）使用HttpServletResponse对象添加响应头（Access-Control-Allow-Origin）来授权原始域，这里Origin的值也可以设置为"*" ，表示全部放行。

@RequestMapping("/hello")

	@ResponseBody

	public String index(HttpServletResponse response){

		response.addHeader("Access-Control-Allow-Origin",   "http://127.0.0.1:8848");

		return "Hello World";

	}

2.使用注解（局部跨域）

在方法上（@RequestMapping）使用注解 @CrossOrigin ：

   @RequestMapping("/hello")

	@ResponseBody

	@CrossOrigin("http://127.0.0.1:8848") 

	public String index( ){

		return "Hello World";

	}

或者在控制器（@Controller）上使用注解 @CrossOrigin

3.返回新的CorsFilter（全局跨域）

在任意配置类，返回一个新的CorsFilter Bean，并添加映射路径和具体的CORS配置信息。

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;
import java.util.Collections;
@Configuration
public class CorsConfig {
    @Bean
    public CorsFilter corsFilter() {
        CorsConfiguration corsConfiguration = new CorsConfiguration();
        //1,允许任何来源
        corsConfiguration.setAllowedOriginPatterns(Collections.singletonList("*"));
        //2,允许任何请求头
        corsConfiguration.addAllowedHeader(CorsConfiguration.ALL);
        //3,允许任何方法
        corsConfiguration.addAllowedMethod(CorsConfiguration.ALL);
        //4,允许凭证
        corsConfiguration.setAllowCredentials(true);

        UrlBasedCorsConfigurationSource source 
= new UrlBasedCorsConfigurationSource();
        source.registerCorsConfiguration("/**", corsConfiguration);
        return new CorsFilter(source);
    }
}