//开放所有跨域---add 其他属性2023-10-18//response.AppendHeader(Access-Control-Allow-Origin, *);//response.AppendHeader(Access-Control-ALLow-Methods, GET,POST,PUT,DELETE,OPTIONS);//response.AppendHeader(Access-Control-ALLow-Headers, *);//response.AppendHeader(Access-Control-Allow-Credentials, true);//response.AppendHeader(Access-Control-Allow-Private-Network, true);//response.AppendHeader(Access-Control-Max-Age, 3600);response.AddHeader(Access-Control-Allow-Origin, *);response.AddHeader(Access-Control-ALLow-Methods, GET,POST,PUT,DELETE,OPTIONS);response.AddHeader(Access-Control-ALLow-Headers, *);response.AddHeader(Access-Control-Allow-Credentials, true);response.AddHeader(Access-Control-Allow-Private-Network, true);response.AddHeader(Access-Control-Max-Age, 3600);### 2025-8-5 开放所有跨域 ----前端跨源请求cors失败解决办法jquery的ajax跨源请求cors失败解决办法js中ajax请求前添加 jQuery.support.cors true;或者js中ajax请求中header处理headers中的Content-Type: application/json 给去掉了Access-Control-Allow-Origin, * 添加JQuery -跨域处理浏览器支持并非所有浏览器都完全支持 CORS。例如IE8 和 IE9 仅部分支持 CORS需要在调用处指定jQuery.support.cors trueVUE前端应用和后端 API 服务器 -跨域处理VUEViteWebpack都可以配置的都有个server在其中配置proxy代理就可以了devServer.proxy#Type: string | Object如果你的前端应用和后端 API 服务器没有运行在同一个主机上你需要在开发环境下将 API 请求代理到 API 服务器。这个问题可以通过 vue.config.js 中的 devServer.proxy 选项来配置。devServer.proxy 可以是一个指向开发环境 API 服务器的字符串module.exports {devServer: {proxy: http://localhost:4000}}这会告诉开发服务器将任何未知请求 (没有匹配到静态文件的请求) 代理到http://localhost:4000。如果你想要更多的代理控制行为也可以使用一个 path: options 成对的对象。完整的选项可以查阅 http-proxy-middleware 。module.exports {devServer: {proxy: {/api: {target: url,ws: true,changeOrigin: true,pathRewrite:{^/api:}},/foo: {target: other_url}}}}注意例如上述配置中的url 是http://127.0.0.1:27100 /api:是 /Terminal: 的话按照你这配置的话那原来代码中的请求路径就为 Terminal?tIsDeviceOnLine会自动拼接成http://127.0.0.1:27100/Terminal?tIsDeviceOnLine地址那么这个pathRewrite 这个属性要注视掉。例如上述配置中的url 是http://127.0.0.1:27100/Terminal /api:是 /Terminal: 的话按照你这配置的话那原来代码中的请求路径就为 Terminal?tIsDeviceOnLine会自动拼接成http://127.0.0.1:27100/Terminal/Terminal?tIsDeviceOnLine地址同时pathRewrite 这个属性要保留保留的话就会把/Terminal制成“”最终地址就会变成http://127.0.0.1:27100/Terminal?tIsDeviceOnLine跨域 fetchfetch(http://127.0.0.1:27100/Terminal?tIsDeviceOnLine, {headers: {accept: */*,accept-language: zh-CN,zh;q0.9,content-type: application/x-www-form-urlencoded; charsetUTF-8,sec-ch-ua: \Google Chrome\;v\141\, \Not?A_Brand\;v\8\, \Chromium\;v\141\,sec-ch-ua-mobile: ?0,sec-ch-ua-platform: \Windows\,sec-fetch-dest: empty,sec-fetch-mode: cors,sec-fetch-site: cross-site},body: {\CommandName\:\IsDeviceOnLine\},method: POST,mode: cors,credentials: omit}).then(res {console.log(res , res);});jsfetch(https://example.com, { credentials: include,});备注 当请求使用 credentials: include 时响应的 Access-Control-Allow-Origin 不能使用通配符 *。在这种情况下Access-Control-Allow-Origin 必须是当前请求的源在使用 CORS Unblock 插件的情况下请求仍会失败。备注 无论怎么设置浏览器都不应在 预检请求 中发送凭据。了解更多跨域资源共享 附带身份凭证的请求Fetch API 使用示例Fetch API 是一种现代化的网络请求工具支持异步操作并基于 Promise使代码更简洁易读。以下是一个使用 fetch 发送 POST 请求的示例fetch(api_base_url /api/scan, {method: POST, // 指定请求方法credentials: include, // 包括 cookies 在请求中headers: {Content-Type: application/json // 设置请求头},body: JSON.stringify({ key: value }) // 请求体发送 JSON 数据})then(response {if (!response.ok) {throw new Error(网络响应失败: response.statusText);}return response.json(); // 解析 JSON 响应})then(data console.log(成功:, data))catch(error console.error(错误:, error));注意事项credentials: include用于在跨域请求中发送 cookies但需要服务器正确配置 CORS。错误处理fetch 不会因 HTTP 状态码如 404 或 500自动抛出错误需要手动检查 response.ok。JSON 数据通过 JSON.stringify() 将对象转换为字符串并设置 Content-Type 为 application/json。替代方案对于简单的 GET 请求可以直接使用默认配置fetch(api_base_url /api/data).then(response response.json()).then(data console.log(data)).catch(error console.error(错误:, error));Fetch API 提供了灵活性和强大的功能是现代 Web 开发中不可或缺的工具。客户现场的请求--实际使用const service (option) fetch(http://127.0.0.1:27100 option.url, {headers: {accept: */*,accept-language: zh-CN,zh;q0.9,content-type: application/x-www-form-urlencoded; charsetUTF-8,sec-ch-ua: \Google Chrome\;v\141\, \Not?A_Brand\;v\8\, \Chromium\;v\141\,sec-ch-ua-mobile: ?0,sec-ch-ua-platform: \Windows\,sec-fetch-dest: empty,sec-fetch-mode: cors,sec-fetch-site: cross-site},body: JSON.stringify(option.data),method: option.method,mode: cors,credentials: omit}).then(response {if(!response.ok) {throw new Error(请检查设备服务是否正常开启);}return response.json();}).catch(error {console.error(error);});export default servicewindow浏览器控制台操作 案例window.fetch(http://127.0.0.1:27100/Terminal?tIsDeviceOnLine, {headers: {accept: /,accept-language: zh-CN,zh;q0.9,content-type: application/x-www-form-urlencoded; charsetUTF-8,sec-ch-ua: Google Chrome;v141, Not?A_Brand;v8, Chromium;v141,sec-ch-ua-mobile: ?0,sec-ch-ua-platform: Windows,sec-fetch-dest: empty,sec-fetch-mode: cors,sec-fetch-site: cross-site},body: {CommandName:IsDeviceOnLine},method: POST,mode: cors,credentials: omit}) .then(response response.json()).then(data console.log(data)).catch(error console.error(错误:, error));XMLHttpRequest API 使用示例var xmlhttp;if (window.XMLHttpRequest) {// IE7, Firefox, Chrome, Opera, Safari 浏览器执行代码xmlhttpnew XMLHttpRequest();} else {// IE6, IE5 浏览器执行代码xmlhttpnew ActiveXObject(Microsoft.XMLHTTP);}// 创建 XMLHttpRequest 对象//var xhr new XMLHttpRequest();// 配置请求xhr.open(GET, https://api.example.com/data, true);// 设置请求头如果需要的话// xhr.setRequestHeader(Content-Type, application/json);// 定义回调函数xhr.onload function () {if (xhr.status 200 xhr.status 300) {// 请求成功处理响应console.log(Response:, xhr.responseText);} else {// 处理错误console.error(Error:, xhr.statusText);}};// 处理网络错误xhr.onerror function () {console.error(Request failed);};// 发送请求xhr.send();JQuery -跨域处理浏览器支持并非所有浏览器都完全支持 CORS。例如IE8 和 IE9 仅部分支持 CORS需要在调用处指定jQuery.support.cors truefetch 请求遇到cors问题fetch(https://www.baidu.com/home/weather/getweather?citycode1078bsToken3c699e2c5cfeb3699d48f1cf3c56dfb2indextypemanht_req_seqid0xa4191b6302e263e2asyn1t1760861499929sid63141_64005_64983_65247_65179_65415_65424_65456_65453_65361_65538_65593_65618_65636_65664_65668_65681_65687_65757_65729_65759_65786_65790_65866, {headers: {accept: text/plain, */*; q0.01,accept-language: zh-CN,zh;q0.9,ps-dataurlconfigqid: 0xa4191b6302e263e2,sec-ch-ua: \Google Chrome\;v\141\, \Not?A_Brand\;v\8\, \Chromium\;v\141\,sec-ch-ua-mobile: ?0,sec-ch-ua-platform: \Windows\,sec-fetch-dest: empty,sec-fetch-mode: cors,sec-fetch-site: same-origin,x-requested-with: XMLHttpRequest},referrer: https://www.baidu.com/,body: null,method: GET,mode: cors,credentials: include});当你在网页中遇到“fetch 请求时拒绝连接,因为它违反了文档的内容安全策略”CORS, 即跨源资源共享策略的错误时通常是因为浏览器出于安全考虑阻止了跨域请求。为了解决这个问题你可以采取以下几种方法1. 服务器端设置CORS在你的服务器上设置CORS头部是最直接的方法。这可以通过在服务器响应中添加适当的HTTP头部来实现。例如如果你使用的是Node.js和Express你可以在Express应用中添加以下中间件来允许所有域的访问javascriptCopy Codeconst express require(express);const cors require(cors);const app express();app.use(cors()); // 允许所有域的访问// 或者指定允许的域app.use(cors({origin: https://example.com // 替换为你的目标域名}));app.listen(3000, () {console.log(Server is running on port 3000);});2. 使用代理服务器如果你无法控制服务器设置CORS或者出于其他原因需要在客户端解决这个问题你可以使用代理服务器。这意味着你的前端应用将请求发送到你的服务器然后你的服务器再将请求转发到目标服务器。这样你的服务器可以设置CORS头部从而避免直接违反浏览器的安全策略。例如使用Node.js创建一个简单的代理服务器javascriptCopy Codeconst express require(express);const axios require(axios);const cors require(cors);const app express();app.use(cors()); // 允许所有域的访问app.get(/api/proxy, async (req, res) {try {const response await axios.get(https://example.com/api/data, { // 目标URLheaders: {// 可以添加任何必要的头例如认证信息等}});res.json(response.data);} catch (error) {res.status(500).json({ error: error.message });}});