>[danger]跨域是什么引起的，用什么方法实现跨域？ >[info]建议回答 跨域是因为**浏览器的同源策略**引起的。常用的跨域解决方案包括： 1. **CORS：跨域资源共享**（Cross-Origin Resource Sharing），是一种允许浏览器向跨域服务器发送 Ajax 请求的机制，支持现代浏览器，服务器端需要设置 Access-Control-Allow-Origin 头信息，指定允许的源或通配符，从而实现跨域请求。 2. **代理**：在同源页面内部发送 AJAX 请求到同域服务器，由服务器代理转发请求到跨域服务器，最后再将结果返回给同源页面。 3. WebSocket：WebSocket 是一种 HTML5 协议，它使得浏览器和服务器之间可以建立持久化的连接，可以直接使用 Socket 进行通信，避免了浏览器的跨域限制。 >[info]浏览器的同源策略 浏览器的同源策略是一种安全机制，它限制了从一个源加载的文档或脚本如何与来自另一个源的资源进行交互。**同源指的是两个 URL 的协议、主机和端口号都相同。** 浏览器的同源策略包括以下几个方面： 1. JavaScript 无法读取非同源网页的 Cookie、LocalStorage 和 IndexedDB。 2. JavaScript 无法读取非同源网页的文档对象模型（DOM）。 3. XMLHttpRequest 和 Fetch **不能发送跨域请求**。 4. iframe 不能访问非同源页面的 DOM。 5. HTTPS 页面中的 HTTP 资源无法加载，反之亦然。 6. 端口号不同也被认为是不同的源。 同源策略的目的是保护用户数据免受恶意网站的攻击。如果两个页面在同一个源下，那么它们可以相互访问并交换数据，但是如果它们不同源，则它们之间就会存在安全隐患。比如，某个网站的 JavaScript 可能试图从其他网站读取用户的敏感信息，如果没有了同源策略的限制，那么这种攻击就无处不在。 >[info]常用的跨域解决方案 ### 跨域资源共享（CORS） 跨域资源共享（CORS）是一种跨域解决方案，它允许浏览器向跨域服务器发出 XMLHttpRequest 请求，从而实现了前端页面和后端 API 的跨域访问。 CORS 通过在 HTTP 头部添加 **Access-Control-Allow-Origin** 等字段来告知浏览器该请求是否允许跨域，因此需要后端设置相应的响应头信息。 具体而言，可以在响应头中设置 **Access-Control-Allow-Origin** 字段来指定允许访问的源头，也可以设置其他相关字段： ``` Access-Control-Allow-Credentials Access-Control-Allow-Methods Access-Control-Allow-Headers ``` 等，来进一步控制跨域请求的行为。 ### Vue.js中的proxy代理 Vue.js 提供了一个开箱即用的代理功能，可以通过配置 vue.config.js 文件中的 devServer.proxy 字段来实现代理。 与 CORS 不同，代理是通过将 API 请求转发到同源的服务器上去处理，然后再将其返回给前端页面。 例如，我们可以将所有以 /api 开头的请求都代理到 http://localhost:3000 服务器上去处理，即可实现跨域访问： ```javascript module.exports = { devServer: { proxy: { '/api': { target: 'http://localhost:3000', changeOrigin: true, pathRewrite: { '^/api': '' } } } } }; ``` 这里通过设置 **target 字段**来指定代理的目标服务器，**changeOrigin 字段**允许修改请求头中的 origin 字段，**pathRewrite 字段**允许对路径进行修改，从而实现对API请求的代理。