vue是一种流行的javascript框架，用于构建现代化的web应用程序。在使用vue开发应用程序时，常常需要与不同的api交互，而这些api往往位于不同的服务器上。由于跨域安全策略的限制，当vue应用程序在一个域名上运行时，它不能直接与另一个域名上的api进行通信。本文将介绍几种在vue中进行跨域请求的方法。
1. 使用代理
一种常见的跨域解决方案是使用代理。在这种情况下，Vue应用程序通过向同一服务器发出HTTP请求来绕过浏览器的同源策略。服务器接收请求，并将它们转发给实际的API。由于代理服务器与API位于同一域上，浏览器不会对此发出跨域安全限制。以下是如何设置代理的示例：
// vue.config.js
module.exports = {
devServer: {
proxy: {
'/api': {
target: 'https://example.com',
changeOrigin: true,
pathRewrite: {
'^/api': ''
}
}
}
}
}在上面的示例中，我们将所有以/api开头的请求代理到https://example.com上。changeOrigin设置为true表示将源设置为target的地址，并设置pathRewrite以将/api从请求中删除。
2. JSONP（仅限GET请求）
JSONP是一种旧的跨域解决方案，它使用GET请求在不同的域上动态添加一个标签。通过将callback函数名作为参数传递，服务器可以将JSON数据包裹在回调函数中返回给客户端。由于脚本源不受同源策略的影响，因此浏览器不会限制从不同域返回的脚本。该方法仅适用于GET请求，因为它没有请求主体。
以下是JSONP的示例：
立即学习“前端免费学习笔记（深入）”；
export default {
getData() {
return new Promise((resolve, reject) => {
const script = document.createElement('script');
const url = 'https://example.com/data?callback=getdata';
script.src = url;
document.head.appendChild(script);
window.getdata = (data) => {
document.head.removeChild(script);
delete window.getdata;
resolve(data);
}
});
}
}在上面的示例中，我们使用Promise来封装JSONP的请求，创建一个标签并将其添加到document.head中。当服务器返回数据时，将回调函数的名称设置为window.getdata，在回调函数中删除标签，并将数据传递给resolve回调。
3. CORS
跨域资源共享（CORS）是一种现代的跨域解决方案，它允许服务器指定哪些来源（域名）有权限访问API。服务器通过返回特定的响应标头来实现此目的。当浏览器发出跨域请求时，它会在预检请求中请求服务器访问控制响应头来验证是否允许请求。如果API返回此响应头，浏览器将允许跨域请求。
以下是一个CORS的示例：
export default {
getData() {
return fetch('https://example.com/data', {
method: 'GET',
mode: 'cors',
headers: {
'Access-Control-Allow-Origin': '*'
}
})
.then(response => response.json())
.then(data => data);
}
}在上面的示例中，我们使用fetch函数来获取API数据，同时将mode设置为cors，以启用CORS。我们还在请求头中设置了Access-Control-Allow-Origin标头，该标头允许所有来源访问API。请注意，为了使CORS正常工作，服务器必须在响应中返回这个标头。
结论
Vue中进行跨域请求可以使用代理，JSONP和CORS等多种方法。每一种方法都有自己的优缺点和适用场景。在选择使用特定的解决方案时，请考虑您的API的安全性，请求的复杂性和响应的速度。
