跨域问题以及使用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就使用下面配的代理地址。¹

前端代码改访问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后，问题解决。

---

1. vscode本地h5请求跨域代理live-server ↩︎