开放全部跨域 ----前端和后端

### 2025-8-5 开放全部跨域 ----后端
```
  //开放全部跨域
  response.AddHeader("Access-Control-Allow-Origin", "*");
  response.AddHeader("Access-Control-Allow-Credentials", "true");
  response.AddHeader("Access-Control-Allow-Methods", "GET,POST,PUT,DELETE,OPTIONS");
  response.AddHeader("Access-Control-Allow-Headers", "Accept,Origin,DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization");
       //开放全部跨域---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 = true
VUE前端应用和后端 API 服务器 -跨域处理处罚
VUE，Vite，Webpack都可以设置的，都有个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: '',
        ws: true,
        changeOrigin: true,
        pathRewrite:{
                   "^/api":""
         }
      },
      '/foo': {
        target: ''
      }
    }
  }
}
注意：比方上述设置中的是http://127.0.0.1:27100， '/api':是 '/Terminal': 的话，按照你这设置的话，那原来代码中的哀求路径就为 Terminal?t=IsDeviceOnLine，会自动拼接成http://127.0.0.1:27100/Terminal?t=IsDeviceOnLine地点，那么这个pathRewrite 这个属性要注视掉。
比方上述设置中的是http://127.0.0.1:27100/Terminal， '/api':是 '/Terminal': 的话，按照你这设置的话，那原来代码中的哀求路径就为 Terminal?t=IsDeviceOnLine，会自动拼接成http://127.0.0.1:27100/Terminal/Terminal?t=IsDeviceOnLine地点，同时pathRewrite 这个属性要生存，生存的话就会把/Terminal制成“”，终极地点就会酿成http://127.0.0.1:27100/Terminal?t=IsDeviceOnLine

跨域 fetch
fetch("http://127.0.0.1:27100/Terminal?t=IsDeviceOnLine", {
  "headers": {
    "accept": "*/*",
    "accept-language": "zh-CN,zh;q=0.9",
    "content-type": "application/x-www-form-urlencoded; charset=UTF-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": "OST",
  "mode": "cors",
  "credentials": "omit"
}).then(res => {
console.log("res === ", res);
});
js
fetch("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;q=0.9",
"content-type": "application/x-www-form-urlencoded; charset=UTF-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 service
window欣赏器控制台利用 案例
window.fetch("http://127.0.0.1:27100/Terminal?t=IsDeviceOnLine", {
"headers": {
"accept": "/",
"accept-language": "zh-CN,zh;q=0.9",
"content-type": "application/x-www-form-urlencoded; charset=UTF-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": "OST",
"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 欣赏器实行代码
    xmlhttp=new XMLHttpRequest();
} else {
    // IE6, IE5 欣赏器实行代码
    xmlhttp=new 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 = true
 
fetch 哀求遇到cors标题
fetch("https://www.baidu.com/home/weather/getweather?citycode=1078&bsToken=3c699e2c5cfeb3699d48f1cf3c56dfb2&indextype=manht&_req_seqid=0xa4191b6302e263e2&asyn=1&t=1760861499929&sid=63141_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, */*; q=0.01",
    "accept-language": "zh-CN,zh;q=0.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应用中添加以下中央件来允许全部域的访问：
javascript
Copy Code
const 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创建一个简朴的署理服务器：
javascript
Copy Code
const 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', { // 目标URL
      headers: {
        // 可以添加任何须要的头，比方认证信息等
      }
    });
    res.json(response.data);
  } catch (error) {
    res.status(500).json({ error: error.message });
  }
});
app.listen(4000, () => {
  console.log('Proxy server is running on port 4000');
});
3. JSONP（仅限于GET哀求）
如果你的需求只是简朴的数据获取（好比只做GET哀求），可以思量利用JSONP（JSON with Padding），只管这不是一个安全的办理方案，但它可以作为暂时办理方案。JSONP通过在URL中添加一个回调函数来实现跨域哀求。这种方法在当代Web开辟中已经较少利用，由于CORS提供了更安全、更机动的办理方案。
4. 查抄Content-Security-Policy头部
偶尔候，标题大概不是由CORS引起的，而是由内容安全战略（Content-Security-Policy, CSP）头部设置不妥引起的。确保你的CSP头部没有制止特定的资源加载。比方，如果你的应用须要从外部加载脚本或样式表，确保CSP头部允许这些利用。
http
Copy Code
Content-Security-Policy: default-src 'self'; script-src 'self' https://trusted-cdn.com; style-src 'self' https://trusted-cdn.com; img-src 'self';
确保调解CSP头部以顺应你的现实需求。以上就是办理跨域哀求被欣赏器制止的一些方法。选择最得当你当前环境
```