Vue.js 中跨域请求的方式详解
跨域是前端开发中经常遇到的问题，特别是当我们需要使用 Vue.js 开发跨域的应用时。在本文中，我们将详细探讨 Vue.js 中跨域请求的方式。
一、为什么需要跨域
在前后端分离的开发模式中，前端项目和后端项目存在不同的域名，而浏览器出于安全考虑，禁止不同域名之间进行访问。这就需要我们进行跨域请求，使不同域名之间可以正常通信。
二、跨域请求的方式
- JSONP
JSONP 是一种利用 script 标签跨域请求的方式。JSONP 通过创建一个 script 标签，设置其 src 为跨域请求url，然后在 url 中添加回调函数名，服务器端返回一个 JS 函数调用并传入 JSON 数据，即实现数据的获取。
示例代码：
jsonp(url, callback) {
const script = document.createElement('script')
script.src = `${url}?callback=${callback}`
document.body.appendChild(script)
}这里的 url 为跨域请求 URL，callback 为回调函数名。服务器端需要将返回的数据包含在回调函数中，如：
callback({data: 'hello world'})JSONP 的缺点是只支持 GET 请求，且容易受到 XSS 攻击。
- CORS
CORS（Cross-Origin Resource Sharing）是 HTML5 中推出的一种跨域请求方式，CORS 实现原理是浏览器将请求头中的 Origin 域名与服务器端设置的允许跨域域名进行比对，如果域名匹配则允许跨域请求。
我们需要在服务器端设置响应头，如：
Access-Control-Allow-Origin: http://localhost:8080 // 允许跨域访问的域名 Access-Control-Allow-Methods: POST, GET, OPTIONS // 允许的请求方法 Access-Control-Allow-Headers: Content-Type // 允许的请求头
CORS 的优点是支持所有 HTTP 请求方法，且不易受到 XSS 攻击。
- 反向代理
另一种跨域请求方式是通过反向代理，将客户端请求发往同一域名下的服务器，在服务器内部再发出一个跨域请求，如 Nginx 可以通过配置反向代理实现。
示例代码：
location /api/ {
proxy_pass http://localhost:3000/; // 代理到跨域请求服务
add_header Access-Control-Allow-Origin $http_origin; // 允许跨域访问的域名
add_header Access-Control-Allow-Headers "Origin, Content-Type, Cookie"; // 允许的请求头
add_header Access-Control-Allow-Methods "PUT,POST,GET,DELETE,OPTIONS"; // 允许的请求方法
add_header Access-Control-Allow-Credentials true; // 允许带 Cookie 访问
}反向代理的缺点是需要专门的服务器进行处理，增加了系统的复杂度。
三、使用 Axios 库处理跨域请求
Axios 是一个基于 promise 的 HTTP 请求库，我们可以使用 Axios 处理 Vue.js 中的跨域请求。
首先，需要安装 Axios 库：
npm install axios -S
然后在 Vue.js 中使用：
axios.get('/api/getData', {
headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
params: { id: 1 }
}).then(res => {
console.log(res.data)
})这里的 '/api/getData' 是 API 接口地址，headers 是请求头，params 是参数。
四、总结
本文中我们讨论了 Vue.js 中跨域请求的方式，包括 JSONP、CORS、反向代理和使用 Axios 库处理。通过对这些方式的分析，我们可以选择最适合我们项目的方式，实现跨域请求功能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/647b0cdd968c7c53b069f344