使用代理服务器的方式解决跨域问题

奋斗吧程序媛2026-02-25 10:18

前端跨域问题主要涉及浏览器的同源策略，它是浏览器的一种安全机制，限制不同源的网页脚互相访问资源，以下是详细解答：

一、跨域是指什么之间的跨域？

跨域是浏览器和服务器之间的限制问题，具体表现在：

当浏览器中运行的前端页面（如：https://a.com）尝试访问另一个源（如：https://b.com）的接口或资源时，浏览器会基于安全策略阻止该请求。

二、如何判断是否跨域？

浏览器通过同源策略判断是否跨域，满足以下任一条件即为跨域：

1.协议不同：http:// vs https://

2.域名不同：a.com vs b.com(包含子域名 sub.a.com vs a.com)

3.端口不同：a.com:80 vs a.com:8080

三、常见的跨域场景

1.前后端分离开发时，前端页面（如http://localhost:3000）调用后端的接口（如：http://api.example.com）

2.调用第三方开放API（如高德地图、支付宝接口）。

3.静态资源托管在不同域名下（如CDN）

四、使用代理服务器（Proxy）的方式解决跨域

**适用场景：**开发环境或部署同域服务器

**优缺点：**无需后端改动，但增加部署成本

**原理：**前端通过同域服务器转发请求，绕过浏览器限制。

开发环境代码示例：

复制代码

//vue.config.js / webpack.config.js
module.exports = {
    devServer:{
        proxy:{
            "/api":{
            target:"http://api.example.com",
            changeOrigin:true,
            pathRewrite:{"^api":""}
            },
        },
    },
};