当前位置：首页 > news >正文

前端跨域如何调试，以及相关概念梳理【环境变量本地代理正向代理反向代理 OPTIONS请求 CDN 等】

news 来源：原创 2025/5/26 11:02:36

跨域报错

在这里插入图片描述

一

前端日常开发时，项目的部署地址和接口请求的地址一般是同源的，不会跨域。
例如项目的测试环境部署在https://my-dev.BeatingWorldLine.com/xxx,
测试环境的访问接口域名也要相同来保证不跨域https://my-dev.BeatingWorldLine.com/api/xxx,
当然，vite等项目构建工具也支持通过环境变量来动态切换访问域名，也可以实现线上的跨域访问。

// .env.development文件 
VITE_BASE_URL = 'https://my-dev.BeatingWorldLine.com/'
// .env.production文件
VITE_BASE_URL = 'https://my.BeatingWorldLine.com/'
//也可以多设置几个变量 在线上环境访问其他域名下的API

//axios请求动态获取不同环境下的域名
axios.defaults.baseURL = import.meta.env.VITE_BASE_URL

//package.json配置不同环境下的启动命令 来对应不同环境变量下的 VITE_BASE_URL 
//--mode localhost时 由于没有.env.localhost文件配置 需要本地代理  下文说明
"serve": "vite serve --mode localhost",
"dev": "vite build --mode development",
"pro": "vite build --mode production",

mode development / mode production 都是项目打包部署到服务器后对应的执行命令。
mode localhost 本地开发未配置环境变量时，就需要用到vite-dev-server的本地代理来访问接口了。

//以vite为例，在vite.config.ts中配置proxy如下  类似nginx配置  
//当识别到请求头部为【/other】时，将请求补全并访问https://my-dev.BeatingWorldLine.com/api/xxx
 server: {
   proxy: {
     '/api': {
       target: 'https://my-dev.BeatingWorldLine.com/',
       changeOrigin: true,
     }
   }
 }

当需要访问其他域名接口时，例如【my-test.BeatingWorldLine】。在本地开发的环境下，仅需配置下本地代理即可。

//当识别到请求头部为【/other】时，将请求补全并访问https://my-test.BeatingWorldLine/other/xxx
 server: {
   proxy: {
     '/other': {
       target: 'https://my-test.BeatingWorldLine',
       changeOrigin: true,
     }
   }
 }

环境变量、本地代理，都是前端项目接口访问的配置方式
- 环境变量可以配置不同环境下固定的接口访问地址，包括开发环境也可以手动配置
- 本地代理是反向代理，类似于nginx反向代理，都可以解决跨域问题。
  - 反向代理:代表服务端对客户端请求进行拦截转发，隐藏服务端身份接收请求，解决跨域。
  - 正向代理:代表客户端向服务器发送请求，隐藏客户端身份发送请求，科学上网。

二

本地调试跨域接口可以解决了，那打包部署到线上怎么办呢？

先来了解下跨域

浏览器因同源策略，在协议、域名或端口号不同时，先向服务器发送OPTIONS预检请求，检查服务端是否允许跨域。若不允许，会阻止跨域请求。
如何解决？
线上环境，前端项目已经整体打包为静态资源，vite-dev-server无法启动，本地代理自然也无法生效。
所以就需要在部署域名对应的服务器下，进行CORS跨域配置。
这样在浏览器发送OPTIONS预检请求时，就会收到服务端允许跨域的配置，从而正常请求。
什么是OPTIONS 预检请求？
是浏览器在发送某些跨域（CORS，Cross-Origin Resource Sharing）请求前，自动发起的一种 HTTP 请求，用于确认目标服务器是否允许实际请求的跨域行为。

server {
    listen 80;
    server_name a.com;  # 你的服务器域名

    location / {
    	#和前端本地代理原理相同，服务端也可以作为中间人，将请求转发到其他服务来实现负载均衡等业务场景
        proxy_pass http://backend_service;  # 代理到你的后端服务
        proxy_set_header Host $host;

        # 仅当请求来源是 B、C、D 之一时，设置 CORS 头允许跨域
        if ($cors_origin != "") {
            add_header Access-Control-Allow-Origin $cors_origin;
            add_header Access-Control-Allow-Methods "GET, POST, OPTIONS, PUT, DELETE";
            add_header Access-Control-Allow-Headers "Content-Type, Authorization";
            add_header Access-Control-Allow-Credentials true;
        }

        # 处理 OPTIONS 预检请求
        if ($request_method = OPTIONS) {
            return 204;
        }
    }
}