Vue做开发挺费劲儿，尤其是让每个账号之间相互关联。别急，咱们先说说HTTP请求、安全防护和CORS等常见的处理方案，同时还会有实用的小案例来帮助大家更好地理解和运用技巧！
1. JSONP：老而弥坚的跨域解决方案
你们知道吗，JSOP就是用js的script元素src属性巧妙地跳过了同源限制，实现了远程请求功能！下面给大家简单说下步骤先弄点动态代码放在script标签里头，接着把它发送到另一台电脑上，等那边回复后，用JSON把我们要的数据包好，塞进回调函数里，这样就大功告成！
例如，我们可以创建一个函数来处理服务器返回的数据：
javascript
function handleData(data) {
console.log(data);
}
然后在HTML中动态创建一个script标签：
“`html
这个 script 标签一加载就能立刻找服务器，然后接下来的事都交给 handleData 这哥们儿搞定
2. CORS：现代的跨域解决方案
别慌，CORS（Cross-originResourceSharing）可没你想得那么难，就是处理网页间通信的小技巧。只要在服务器上动动手脚，就能允许或拒绝其他网站的请求了。关键点就在于发送到服务器的请求头，这里面包含了一个叫做Origin的字段，因此服务器就能根据这个信息来决定是否回应当前请求。如果同意的话，那么服务器就会在响应头部添加一个称为Access-Control-Allow-Origin的字段，这样浏览器才能放心大胆地继续操作！
你知道吗？用Node.js设置CORS超简单。特别是Express这个框架，真是太实用了
咱们要来个express模块，这东西能让我们快速搞定网站。
const app = express();
app.use((req, res, next) => {
// 发送JSONP请求
function jsonp(url, callback) {
const script = document.createElement('script');
script.src = url;
window[callback] = function(data) {
delete window[callback];
document.body.removeChild(script);
callback(data);
}
document.body.appendChild(script);
}
// 使用JSONP请求数据
jsonp('http://example.com/api/data?callback=handleData', function(data) {
console.log(data);
});
设置下头部信息，告诉浏览器允许任何地方的访问。
next();
});
别傻看看那’/data’了，大家伙儿都在这儿等！简单，就是调用个app.get()函数，路径设为’statat’。然后他们要什么，你还给他什么。最后把这些全放到(req, res)里裹好，祈愿和感谢全都妥妥的~
return {data: “你好，世界！”};
app.listen(3000, () => {
我在把服务器放在端口3000上跑！
这样，任何域名下的请求都可以访问这个服务器提供的数据。
3. 代理服务器：万能的跨域解决方案
别纠结JSONP和CORS，可以试试代理服务器！简单来说就是把前端的请求交给它处理，完事儿后再告诉我们结果。重点是，因为它们都在一个域里面，所以跨域问题也就消失了呢～
简单点说，咱们用Vue搞项目的时候，想省事就可以用这个叫做http-proxy-middleware的工具来帮忙搞定网络请求的事儿。
是时候用上 http-proxy-middleware 了，大致应该没问题？
// 设置允许跨域的域名
const allowedOrigins = ['http://example.com'];
// 检查请求是否允许跨域
function checkIfAllowedOrigin(origin) {
return allowedOrigins.includes(origin);
}
// 处理CORS请求
function handleCORSRequest(req, res) {
const origin = req.headers.origin;
if (checkIfAllowedOrigin(origin)) {
res.setHeader('Access-Control-Allow-Origin', origin);
res.setHeader('Access-Control-Allow-Methods', 'GET, POST');
res.setHeader('Access-Control-Allow-Headers', 'Content-Type');
res.setHeader('Access-Control-Max-Age', '86400');
// 处理请求...
} else {
// 返回非法请求错误
res.statusCode = 403;
res.end('Forbidden');
}
}
// 服务器端处理跨域请求
app.use((req, res, next) => {
if (req.method === 'OPTIONS') {
handleCORSRequest(req, res);
} else {
next();
}
});
// 客户端发送跨域请求
fetch('http://example.com/api/data', {
method: 'GET',
headers: {
'Origin': 'http://example.com'
}
})
.then(response => response.json())
.then(data => {
console.log(data);
});
给你们介绍下这个函数，它就是用来帮我管理应用的。
app.use(
‘/api’,
createProxyMiddleware({
target: ‘http://example.com’,
changeOrigin: true,
})
);
};
记住你以后发API请求得改成http://example.com！
4. JSONP的优缺点
JSONP好用归好用，不过要注意只能用 GET 方法。而且用 script 标签发请求的话，可能会有些安全问题哈。
5. CORS的优缺点
这个跨源共享(CORS)功能可真是牛逼极了！就算是HTTP请求也照样应对自如。而且它还能控制哪些地方才能发出跨域请求！就是设置起来稍微费劲点，需要服务器协调配合，其中一些老旧的浏览器可能就用不了咯。
// 代理服务器
app.use('/api', createProxyMiddleware({
target: 'http://example.com',
changeOrigin: true,
}));
// 客户端发送跨域请求
fetch('/api/data')
.then(response => response.json())
.then(data => {
console.log(data);
});
6. 代理服务器的优缺点
代理服务器挺好的，又能解决跨站问题，但你要知道，有时可能会让服务器慢一些，而且网络也很重要
7. 实际应用中的选择
想知道你想要什么数据，想在哪儿用？要是数量不多的话，JSONP挺简单好用的；如果要搞一下HTTP请求的高级操作或者让服务端做点事儿，CORS倒也不错哟。实在不行，再试试找个代理服务器呗！
8. 安全性考虑
大家得重视跨域的问题！无论是JSONP还是CORS，或者是利用代理服务器，都要小心防备CSRF和XSS这两个恶意攻击。
9. 未来趋势
现在的跨域问题都被搞定了，科技进步得真快！听说新技术还会越来越多，咱们编程的得时刻关注这些新鲜话题。
10. 总结与展望
跨域的事情是不是很头大？别慌，你看我这三个妙招：JSONP、CORS还有代理服务器，再配上几个小代码例子，保证管用！相信大家都能用到
聊聊Vue的跨源问题，你们平常是咋处理的？
评论0