>[danger]常用的跨域解决方案 >[info]建议回答 常用的跨域解决方案包括： 1. **CORS：跨域资源共享**（Cross-Origin Resource Sharing），是一种允许浏览器向跨域服务器发送 Ajax 请求的机制，支持现代浏览器，服务器端需要设置 Access-Control-Allow-Origin 头信息，指定允许的源或通配符，从而实现跨域请求。 2. **代理**：在同源页面内部发送 AJAX 请求到同域服务器，由服务器代理转发请求到跨域服务器，最后再将结果返回给同源页面。 3. WebSocket：WebSocket 是一种 HTML5 协议，它使得浏览器和服务器之间可以建立持久化的连接，可以直接使用 Socket 进行通信，避免了浏览器的跨域限制。 >[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请求的代理。