前端跨域问题解决方案

1 什么是跨域

在前端领域中，跨域是指浏览器允许向服务器发送跨域请求，从而克服Ajax只能同源使用的限制。


Access to fetch at 'http://localhost:8081/auth/captchaImage' from origin 'http://localhost:5173' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

2 什么是同源策略

同源策略是一种约定，由Netscape公司1995年引入浏览器，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，浏览器很容易受到XSS、CSFR等攻击。所谓同源是指"协议+域名+端口"三者相同，即便两个不同的域名指向同一个ip地址，也非同源。

同源策略限制以下几种行为：

Cookie、LocalStorage 和 IndexDB 无法读取
DOM和JS对象无法获得
AJAX 请求不能发送

3 常见的跨域场景

URL	说明	是否允许通信
www.domain.com/a.js www.domain.com/b.js www.domain.com/lab/c.js	同一域名，不同文件或路径	允许
www.domain.com:8000/a.js www.domain.com/b.js	同一域名，不同端口	不允许
http://www.domain.com/a.js https://www.domain.com/b.js	同一域名，不同协议	不允许
http://www.domain.com/a.js http://192.168.4.12/b.js	域名和域名对应相同ip	不允许
http://www.domain.com/a.js http://x.domain.com/b.js http://domain.com/c.js	主域相同，子域不同	不允许
http://www.domain1.com/a.js http://www.domain2.com/b.js	不同域名	不允许

4 跨域解决方案

跨域解决方案有很多，这里只讲两种主要的

4.1 跨域资源共享（CORS）

CORS是一个W3C标准，全称是"跨域资源共享"（Cross-origin resource sharing）。它允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。 CORS需要浏览器和服务器同时支持。目前，所有浏览器都支持该功能，IE浏览器不能低于IE10。

它主要是服务器端(后端)的设置，即让后端设置cors即可让非同源的前端访问后端资源

SpringBoot配置示例

java
@Configuration
public class CorsConfig implements WebMvcConfigurer {
  @Override
  public void addCorsMappings(CorsRegistry registry) {
    registry.addMapping("/**") // 所有接口
        .allowCredentials(true) // 是否发送 Cookie
        .allowedOriginPatterns("*") // 支持域
        .allowedMethods(new String[]{"GET", "POST", "PUT", "DELETE"}) // 支持方法
        .allowedHeaders("*")
        .exposedHeaders("*");
  }
}

4.2 代理服务器

这里指像vite 或者 nginx这类提供前端服务器功能的中间件配置代理，可以让前端请求转发到跨域的后端

它主要是前端的设置，但是如果你的前端服务并没有服务器，或者服务器不支持代理的话，那么请使用CORS或者其他方案

vite配置示例

js
server: {
  // 指定dev sever的端口号，默认为5173
  port: env.VITE_APP_PORT,
  // 自动打开浏览器运行以下页面
  // open: '/',
  // 设置反向代理
  proxy: {
    // 以下示例表示：请求URL中含有"/api"，则反向代理到http://localhost
    // 例如: http://localhost:3000/api/login -> http://localhost/api/login
    // 如果反向代理到localhost报错Error: connect ECONNREFUSED ::1:80，
    // 则将localhost改127.0.0.1
    '/api': {
      target: env.VITE_API_URL,
      changeOrigin: true,
      rewrite: (path) => path.replace(/^\/api/, ''),
    },
  },
},

4.3 两种方式的对比

CORS可以是最直接的解决方案，但是其暴露了域名，可能有受攻击的风险

代理服务器没有暴露域名，但是其需要经过一层代理可能减慢系统速度