跨域问题以及使用vscode的LiveServer插件跨域访问
现象
以下前端代码部署后，在网页访问时报错：No ‘Access-Control-Allow-Origin’ header is present on the requested resource.
$.ajax({
url: 'http://192.168.31.22:10004/searchPicTags', //真实地址
type: 'POST',
data: JSON.stringify({ tags: "T恤,短袖" }),
contentType: 'application/json',
success: function(response) {
const data = response.data;
alert("fetchData " +JSON.stringify(response));
renderCardData(data);
},
error: function(xhr, status, error) {
console.error('Error fetching data:', error);
layer.msg('数据加载失败，请重试！');
}
});
跨域问题的定义（文心一言）
跨域问题（Cross-Origin Resource Sharing，CORS）是指在Web开发中，当一个网页尝试访问另一个与其不同源（即域名、协议或端口号不同）的资源时，浏览器出于安全考虑，会限制这种跨源HTTP请求。跨域问题本质上是由于浏览器的同源策略（Same-Origin Policy）所导致的。同源策略是一种浏览器安全机制，它限制了从一个源加载的文档或脚本与另一个源的资源进行交互。
解决办法
同源部署
避免垮域问题，比如直接把前端包部署在后端java spring服务的static文件夹下。只适合简单项目，不适合前后端分离架构。
后端
- 通常在后端解决，比如允许特定的源，又比如使用@CrossOrigin注解来允许跨域请求。
- WebSockets协议允许跨源通信，不受同源策略的限制。因此，可以使用WebSockets来解决跨域问题。但需要注意的是，WebSockets主要用于实时通信场景，而不是简单的HTTP请求。（文心一言）
代理
比如前端开发的时候配下 webpack 的 devserver 的 proxy 代理。部署生产环境时用nginx转发。
我开发某前端程序时是用VS Code + LiveServer插件来调试的，突然想到 Live Server作为web服务器难道不能配置代理吗，这样我就不用辛苦在我本地去另外装webpack或者nginx了。试了下果然行：
VS Code + LiveServer
Live Server插件设置界面：
settings.json界面：
true 表示启用代理
/searchPicTags 代表匹配127.0.0.1:5500中一旦匹配到/searchPicTags就使用下面配的代理地址。1
前端代码改访问url：
$.ajax({
// url: 'http://192.168.31.22:10004/searchPicTags', //真实地址
url: 'http://127.0.0.1:5500/searchPicTags', //代理地址
type: 'POST',
data: JSON.stringify({ tags: "T恤,短袖" }),
contentType: 'application/json',
success: function(response) {
const data = response.data;
alert("fetchData " +JSON.stringify(response));
renderCardData(data);
},
error: function(xhr, status, error) {
console.error('Error fetching data:', error);
layer.msg('数据加载失败，请重试！');
}
});
重启live server后，问题解决。
原文地址：https://blog.csdn.net/qq_23204557/article/details/143585911
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！