音乐网站开发参考文献,泗洪网站,做网站公司价格,网店运营都要做什么目录 现象跨域问题的定义#xff08;文心一言#xff09;解决办法同源部署后端代理VS Code LiveServer 现象
以下前端代码部署后#xff0c;在网页访问时报错#xff1a;No ‘Access-Control-Allow-Origin’ header is present on the requested resource.
$.ajax({url:… 目录 现象跨域问题的定义文心一言解决办法同源部署后端代理VS Code 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 SharingCORS是指在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后问题解决。 vscode本地h5请求跨域代理live-server ↩︎
