js getjson跨域

基础概念： getJSON 是 JavaScript 中用于发起 HTTP GET 请求以获取 JSON 数据的方法。当涉及到跨域请求时，即浏览器从一个源（域名、协议或端口）向另一个源请求资源，浏览器的同源策略会阻止这种请求，除非目标服务器明确允许。

相关优势：

• 跨域资源共享（CORS）允许服务器声明哪些源可以通过浏览器访问其资源，从而实现安全的跨域数据交互。
• JSONP 是一种解决跨域问题的老方法，它通过 <script> 标签绕过同源策略，但由于其安全性和局限性，现在已被 CORS 取代。

类型与应用场景：

• CORS：现代浏览器广泛支持，服务器端设置 Access-Control-Allow-Origin 头即可允许特定源或所有源访问资源。适用于大多数跨域请求场景。
• JSONP：通过动态创建 <script> 标签来实现跨域请求，只支持 GET 请求，且需要服务器端配合返回可执行的 JavaScript 代码。适用于老旧浏览器或特定场景。

遇到的问题及原因： 当使用 getJSON 进行跨域请求时，可能会遇到以下问题：

• No 'Access-Control-Allow-Origin' header is present on the requested resource：这是因为目标服务器没有设置允许跨域访问的头信息。
• Request header field ... is not allowed by Access-Control-Allow-Headers in preflight response：预检请求（preflight request）失败，因为服务器不允许客户端发送某些自定义请求头。

解决方法：

1. 服务器端设置 CORS 头： 服务器需要在响应头中添加 Access-Control-Allow-Origin，例如：
2. 服务器端设置 CORS 头： 服务器需要在响应头中添加 Access-Control-Allow-Origin，例如：
3. 或者指定特定源：
4. 或者指定特定源：
5. 使用 JSONP（不推荐）： 如果服务器支持 JSONP，可以在客户端这样调用：
6. 使用 JSONP（不推荐）： 如果服务器支持 JSONP，可以在客户端这样调用：
7. 代理服务器： 如果无法修改目标服务器，可以在同源服务器上设置一个代理，由代理服务器转发请求到目标服务器，并将响应返回给客户端。

示例代码（使用 Fetch API 和 CORS）：

fetch('https://api.example.com/data', {
    method: 'GET',
    headers: {
        'Content-Type': 'application/json'
    }
})
.then(response => {
    if (!response.ok) {
        throw new Error('Network response was not ok');
    }
    return response.json();
})
.then(data => console.log(data))
.catch(error => console.error('There has been a problem with your fetch operation:', error));

确保目标服务器设置了适当的 CORS 头，以便浏览器允许跨域请求。