设置浏览器跨域访问

① mac版chrome怎么设置跨域访问

• 工具

1. 老版本的chrome浏览器；

2. 新版本的chrome浏览器；

• 说明

  新版本的chrome浏览器提高了跨域设置的门槛，原来的方法不再适用，分为两部分介绍一下老、新版本chrome的跨域设置方法。

• 老版本设置步骤

1. 下载并安装好chorme浏览器后在桌面找到浏览器快捷图标并点击鼠标右键的属性一栏。

   

② 怎么设置chrome浏览器可以跨域

方法/步骤

1,首先谷歌快捷方式上右击，在下拉列表中选择属性。

③ 遇上浏览器跨域问题怎么办

出于安全原因，浏览器禁止 Ajax 调用驻留在当前原点之外的资源。例如，当你在一个标签中检查你的银行账户时，你可以在另一个选项卡上拥有 EVILL 网站。来自 EVILL 的脚本不能够对你的银行 API 做出 Ajax 请求（从你的帐户中取出钱！）使用您的凭据。

跨源资源共享（CORS）是由大多数浏览器实现的 W3C 规范，允许你灵活地指定什么样的跨域请求被授权，而不是使用一些不太安全和不太强大的策略，如 IFRAME 或 JSONP。

Spring Framework 4.2 GA 为 CORS 提供了第一类支持，使您比通常的基于过滤器的解决方案更容易和更强大地配置它。所以 springMVC 的版本要在 4.2 或以上版本才支持 @CrossOrigin

1. controller 配置 CORS

1.1 controller 方法的 CORS 配置，您可以向 @RequestMapping 注解处理程序方法添加一个 @CrossOrigin 注解，以便启用 CORS（默认情况下，@CrossOrigin 允许在 @RequestMapping 注解中指定的所有源和 HTTP 方法）：

其中 @CrossOrigin 中的 2 个参数：

1.2 为整个 controller 启用 @CrossOrigin

在这个例子中，对于 retrieve() 和 remove() 处理方法都启用了跨域支持，还可以看到如何使用 @CrossOrigin 属性定制 CORS 配置。

1.3 同时使用 controller 和方法级别的 CORS 配置，Spring 将合并两个注释属性以创建合并的 CORS 配置。

1.4 如果您正在使用 Spring Security，请确保在 Spring 安全级别启用 CORS，并允许它利用 Spring MVC 级别定义的配置。

2. 全局 CORS 配置

JavaConfig

使整个应用程序的 CORS 简化为：

您可以轻松地更改任何属性，以及仅将此 CORS 配置应用到特定的路径模式：

如果您正在使用 Spring Security，请确保在 Spring 安全级别启用 CORS，并允许它利用 Spring MVC 级别定义的配置。

3. XML命名空间

还可以将 CORS 与 MVC XML 命名空间配置。

a) 如果整个项目所有方法都可以访问，则可以这样配置；此最小 XML 配置使 CORS 在 /** 路径模式具有与 JavaConfig 相同的缺省属性：

其中 * 表示匹配到下一层；** 表示后面不管有多少层，都能匹配。

如：

这个可以匹配到的路径有：

不能匹配的：

因为 * 只能匹配到下一层路径，如果想后面不管多少层都可以匹配，配置如下：

请求路径有 /api/，方法示例如下：

c) 如果使用 Spring Security，不要忘记在 Spring 安全级别启用 CORS：

4. How does it work?

CORS 请求（包括预选的带有选项方法）被自动发送到注册的各种 HandlerMapping 。它们处理 CORS 准备请求并拦截 CORS 简单和实际请求，这得益于 CorsProcessor 实现（默认情况下默认 DefaultCorsProcessor 处理器），以便添加相关的 CORS 响应头（如 Access-Control-Allow-Origin）。 CorsConfiguration 允许您指定 CORS 请求应该如何处理：允许 origins, headers, methods 等。

a) AbstractHandlerMapping 类的 setCorsConfiguration() 方法允许指定一个映射，其中有几个 CorsConfiguration 映射在路径模式上，比如 /api/**。

b) 子类可以通过重写 AbstractHandlerMapping 类的 getCorsConfiguration(Object, HttpServletRequest) 方法来提供自己的 CorsConfiguration。

c) 处理程序可以实现 CorsConfigurationSource 接口（如 ResourceHttpRequestHandler），以便为每个请求提供一个 CorsConfiguration。

5. 基于过滤器的 CORS 支持

1. 是 springMVC 的版本要在 4.2 或以上版本才支持 @CrossOrigin

2. 非 @CrossOrigin 没有解决跨域请求问题，而是不正确的请求导致无法得到预期的响应，导致浏览器端提示跨域问题。

3. 在 Controller 注解上方添加 @CrossOrigin 注解后，仍然出现跨域问题，解决方案之一就是：

在 @RequestMapping 注解中没有指定 Get、Post 方式，具体指定后，问题解决。

类似代码如下：

参考文章：

1. 官方文档 https://spring.io/blog/2015/06/08/cors-support-in-spring-framework

2. http://fanshuyao.iteye.com/blog/2384189

3. https://blog.csdn.net/taiyangnimeide/article/details/78305131

4. https://blog.csdn.net/snowin1994/article/details/53035433

④ 浏览器跨域及其解决方案

title: 浏览器跨域及其解决方案
author: May
date: 20220428</pre>

什么是跨域跨域的表现解决跨域问题- 浏览器设置(不推荐)- 前端的非正统解决方式- CORS(跨域资源共享)- 配置nginx反向代理

跨域 出于浏览器的同源策略限制， 同源 是指协议、域名、端口都一样， 同源策略（Sameoriginpolicy） 是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。

调用页面时接口数据不返回，控制台中会有红色的报错信息中有类似于 CORS policy 关键字。另外，在最新谷歌浏览器中，会有提出类似于loaded over HTTPS此种关键字，均可以考虑为跨域导致。

[图片上传失败...(image-26deed-1651135597111)]

tips: 有的时候后台小伙伴使用postman测试好的接口，前端不可以使用，原因就是postman不是浏览器，不会有同源限制，同理移动设备app开发和小程序开发也不会有这个问题。这个不是前端bug，同源限制也不是一个不好的规则。

虽然跨域不是一个不好的事情，但是对于前后端分离的web开发来说确实需要解决的，大致的解决方案可分为：

直接从根源解决问题，让浏览器安全策略不起作用。这个方法虽然可以解决问题但是不现实。

官方正统解决方案， CORS规范 允许服务器向浏览器返回一些HTTP Headers，浏览器可以基于这些HTTP Headers来决定是否突破SOP的限制。需要后端配合，浏览器需要什么，接口服务给什么。

nginx是一个高性能的HTTP和反向代理web服务器，nginx用来解决跨域问题的原理与 前端非正统解决方式 的 proxy 的思路是一致的。项目请求接口由nginx服务发出，获取到的数据再经由nginx传递给前端项目，这样前端的请求其实都是由nginx处理的，就没有跨域发生了。

⑤ 如何处理浏览器的跨域问题

首先你需要阅读 CORS ，
首先你需要阅读 CORS ，
首先你需要阅读 CORS ，重要的事情说3遍

当浏览器发送一个跨域的xhr时，需要注意的是，首先会发送一个 Request Method: OPTIONS 类型的请求，如下图

当你使用了前端的vue，react,angular等框架时，可以直接使用他们的脚手架，脚手架提供一个配置好的 webpack ,可以在配置文件中的proxy添加代理地址，这样可以避免跨域问题，如果是自己搭建的框架自行配置 webpack 依然可以实现代理

后台的静态服务器（apache,nginx）一般都带有代理功能，可以自行配置，代理前端项目的xhr请求到真实的后台接口地址，这样可以避免跨域问题

⑥ 浏览器跨域限制的N种解决方式

1. 修改chrome安全策略，带参启动

2. 使用xSwitch 浏览器插件篡改部分请求

3. 使用本地代理转发 webpack dev server或者ngnix

4. 一级域名相同可以设置document.domain为一级域名

5. 接口允许跨域调用

123适用于开发调试 45一般用于生产