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

跨域问题解决

news 来源：原创 2025/6/10 12:57:16

一、同源策略

同源策略（Same-Origin Policy, SOP）

二、跨域问题

三、解决方法

（1）CORS（跨域资源共享）

（2）前端配置反向代理

一、同源策略

在了解跨域问题前，我们首先来了解一下什么是同源策略。

同源策略（Same-Origin Policy, SOP）

同源策略是一种浏览器的安全机制，目的是防止恶意网站通过 JavaScript 访问用户的敏感数据。

同源指的是协议、域名、端口号必须完全相同。例如：

http://example.com:80/page1.html 和 http://example.com:80/page2.html 同源
https://example.com/page.html（协议不同）和 http://example.com/page.html 不同源
http://example.com:8080/page.html（端口不同）和 http://example.com:80/page.html 不同源
http://sub.example.com/page.html（子域不同）和 http://example.com/page.html 不同源

如果两个页面不同源，默认情况下，它们之间的 JavaScript 代码不能相互访问 DOM 或 Ajax 请求数据。

二、跨域问题

当一个网页尝试向不同源的服务器请求数据时，浏览器会阻止请求或限制返回数据的访问，这就是跨域问题。

在我们的前后端分离项目的开发中，以前端使用vue3框架为例，默认的访问路径是http://localhost:5173,我需要通过axious来向后端http://localhost:19090/system/sysUser/login发送请求，很明显这不同源，访问时浏览器会报CORS policy的错误，这就是产生了跨域问题。

三、解决方法

我这边介绍两种最常用的方法：

（1）CORS（跨域资源共享）

服务器可以在响应头中添加如下：

Access-Control-Allow-Origin: *

或指定允许的源：

Access-Control-Allow-Origin: https://example.com

（2）前端配置反向代理

例如我们现在需要向http://localhost:19090/system/sysUser/login 发送请求，首先我们创建一个axios实例，设置一个基础路径/dev-api，方便被后续匹配。

const service = axios.create({
  baseURL:"/dev-api",
  timeout:5000,
})

然后我们在函数中编写请求接口路径。

export function loginService(userAccount, password) {
  return service({
    url:"/sysUser/login",
    method: "post",
    data: {userAccount, password}
  })
}

最后我们在vite.config.js文件中配置代理服务器策略：

server: {
    proxy: {
      "/dev-api": {
        target: "http://127.0.0.1:19090/system",
        rewrite: (p) => p.replace(/^\/dev-api/, ""),
      },
    },
  },

这段代码的意思是，匹配路径中含/dev-api的请求，将其转发到http://127.0.0.1:19090/system，然后重写路径，正则表达式匹配/dev-api/，用空字符串将其替代，避免对路径产生影响。