跨域相关问题_非80端口会出现跨域问题吗-CSDN博客

本文链接：https://blog.csdn.net/qq_51219147/article/details/132739596

跨域解决方案CORS

1、什么是跨域 ?

首先一个url是由：协议、域名、端口三部分组成。（一般端口默认80）
**如：**http://localhost:8080

跨域是指通过JS在不同的域之间进行数据传输或通信，比如用ajax向一个不同的域请求数据，只要****协议、域名、端口有任何一个不同，都被当作是不同的域,浏览器就不允许跨域请求。

跨域的几种常见情

如果跨域调用，会出现如下错误：

 has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

翻译过来就是：已被CORS策略阻止:对请求的响应未通过访问控制检查 , 这就是没有配置相关的跨域参数，是不能访问这个接口的

由于我们采用的是前后端分离的编程方式，前端和后端必定存在跨域问题。解决跨域问题可以采用CORS

2、跨域产生原因？

(1) 出于浏览器的同源策略限制

所谓同源（即在同一个域）就是两个页面具有相同的协议（protocol）、主机（host）和端口号（port）。才可以互相访问

否则只要有一个不同，是不能访问的。

同源策略（Same Orgin Policy）是一种约定，它是浏览器核心也最基本的安全功能，它会阻止一个域的js脚本和另外一个域的内容进行交互，如果缺少了同源策略，浏览器很容易受到XSS、CSFR等攻击。

(2) 跨站脚本攻击(XSS)

(3) 跨站请求伪造 (CSRF)

CSRF（Cross-site request forgery）跨站请求伪造：攻击者诱导受害者进入第三方网站，在第三方网站中，向被攻击网站发送跨站请求。利用受害者在被攻击网站已经获取的注册凭证，绕过后台的用户验证，达到冒充用户对被攻击的网站执行某项操作的目的。

总结: XSS 利用的是用户对指定网站的信任，CSRF 利用的是网站对用户网页浏览器的信任。

非同源会出现的限制

无法读取非同源网页的cookie、localstorage等
无法接触非同源网页的DOM和js对象
无法向非同源地址发送Ajax请求

3、如何解决跨域问题

为了安全起见，浏览器在使用XMLHttpRequest对象发起HTTP请求时必须遵守同源策略。否则，这将被视为跨域请求，并且默认情况下将被禁止。同源策略要求协议、域名和端口号必须完全相同，以便进行正常通信。

在前后端分离的项目中，前端项目和后端项目通常不属于同一源，因此必然存在跨域请求的问题。因此，我们需要对其进行处理，以便前端能够进行跨域请求。

(1) CORS介绍

CORS（Cross-Origin Resource Sharing）即跨域资源共享，是一种用于处理跨域请求的机制。它允许浏览器向跨域服务器发送XMLHttpRequest请求，以便在不违反同源策略的情况下获取服务器上的资源。

CORS的实现方式主要是通过HTTP头部来实现的，浏览器会在请求中添加一些自定义的HTTP头部，告诉服务器请求的来源、目标地址等信息。服务器在接收到请求后，会根据请求头中的信息来判断是否允许跨域请求，并在响应头中添加一些自定义的HTTP头部，告诉浏览器是否允许请求、允许哪些HTTP方法、允许哪些HTTP头部等信息。

在响应头中添加以下字段，可以解决跨域问题:

access-control-allow-origin : 该字段是必须的。它的值要么是请求时 Origin字段的值，要么是一个 *，表示接受任意域名的请求。
access-control-allow-credentials : 该字段可选。它的值是一个布尔值，表示是否允许发送Cookie。默认情况下，Cookie不包括在CORS请求之中。设为 true，即表示服务器明确许可，Cookie可以包含在请求中，一起发给服务器。这个值也只能设为 true，如果服务器不要浏览器发送Cookie，删除该字段即可
Access-Control-Allow-Methods : 该字段必需，它的值是逗号分隔的一个字符串，表明服务器支持的所有跨域请求的方法。注意，返回的是所有支持的方法，而不单是浏览器请求的那个方法。这是为了避免多次"预检"请求。

其实最重要的就是 access-control-allow-origin 字段，添加一个 * ，允许所有的域都能访问

(2) 配置SpringBoot的允许跨域

在SpringBoot项目中只需要编写一个配置类使其实现WebMvcConfigurer接口并重写其addCorsMappings方法即可。

 @Configuration
 public class CorsConfig implements WebMvcConfigurer {
 
     @Override
     public void addCorsMappings(CorsRegistry registry) {
         // 设置允许跨域的路径
         registry.addMapping("/**")
                 // 设置允许跨域请求的域名
                 .allowedOriginPatterns("*")
                 // 是否允许cookie
                 .allowCredentials(true)
                 // 设置允许的请求方式
                 .allowedMethods("GET", "POST", "DELETE", "PUT")
                 // 设置允许的header属性
                 .allowedHeaders("*")
                 // 跨域允许时间
                 .maxAge(3600);
     }
 }

**你也可以通过使用 **@CrossOrigin 注解来解决跨域问题。例如：

 @RestController
 public class MyController {
     
     @CrossOrigin(origins = "http://localhost:8080")
     @GetMapping("/my-endpoint")
     public String myEndpoint() {
         // ...
     }
 }

host:8080")
@GetMapping(“/my-endpoint”)
public String myEndpoint() {
// …
}
}


**这里 **`@CrossOrigin` 注解的 `origins` 参数指定了允许访问该接口的域名。在上面的例子中，只有来自 `http://localhost:8080` 域名的请求才能访问 `myEndpoint` 接口。