大鹏教育平面设计官网优化网络培训

目录

一、同源策略

同源策略（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/，用空字符串将其替代，避免对路径产生影响。

• 原始请求路径：http://localhost:5173/dev-api/sysUser/login
• 转发后的路径：http://127.0.0.1:19090/system/sysUser/login

        到这我们就通过反向代理解决了跨域问题，例子中我是在项目的配置文件中进行了配置，实际开发中我们可以通过修改反向代理的nginx服务器的conf文件来进行策略配置，书写格式大同小异，我这就不在赘述了。

感谢阅读，希望对你能有所帮助！！！