ie下$.getJSON出现问题的解决方法

让我来详细讲解“ie下$.getJSON出现问题的解决方法”的完整攻略。

问题描述

当我们在Internet Explorer（IE）浏览器中使用$.getJSON方法来获取数据时，会遇到跨域请求失败的问题，具体表现为：
- 控制台报错：Access is denied.
- 监控工具中看不到跨域请求。

解决方法

方法一：使用代理

使用代理的原理是先创建一个后端接口，然后将前端的请求通过代理服务器转发到后端接口中去。

下面是一段使用Node.js创建代理的示例代码：

var express = require("express");
var http = require("http");
var request = require("request");
var app = express();
app.use(express.static(__dirname + "/public"));
app.all("*", function(req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Headers", "Content-Type");
  res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS");
  next();
});
app.get("/request", function(req, res) {
  var url = req.query.url;
  request(url, function(error, response, body) {
    if (!error && response.statusCode == 200) {
      res.send(body);
    }
  });
});
var server = http.createServer(app).listen(3000, function() {
  console.log("Server started on port 3000.");
});

上面这段代码中，使用express创建了一个Node.js的服务，并且创建了一个对/request的GET请求响应，将请求中的url参数进行转发，最后将服务启动在3000端口上。

在前端页面中，我们可以将数据获取url更改为http://localhost:3000/request?url=你的数据url，这样就可以避免IE跨域问题了。

方法二：使用jQuery.ajax()方法

在jQuery中，使用$.getJSON方法时数据请求会自动拼装为JSONP的方式，但是IE浏览器仅支持JSON方式的请求，这就导致了IE下无法获取数据的问题。我们可以使用jQuery.ajax()方法来替代$.getJSON，手动指定请求的数据类型。

下面是一段使用jQuery.ajax()的示例代码：

$.ajax({
  url: "你的数据url",
  dataType: "json",
  xhrFields: {
    withCredentials: true
  },
  crossDomain: true,
  success: function(data) {
    console.log(data);
  },
  error: function(xhr, status, error) {
    console.log(error);
  }
});

上面这段代码中，通过设置dataType将请求方式设置为JSON，并且设置了withCredentials和crossDomain来解决跨域问题。通过这种方式可以完美解决IE下$.getJSON无法获取数据的问题。

示例说明

示例一：使用代理获取数据

假设我们需要获取http://example.com/data这个地址下的数据，但是由于跨域问题导致IE下无法成功获取数据。

使用代理的方式，我们可以先在自己的服务上创建一个路由，接收数据请求并将请求转发到http://example.com/data，然后再将数据响应回来。示例代码如下所示：

// 服务端代码
const request = require('request');
const express = require('express');
const app = express();
const port = 3000;

app.use('/', express.static('./public'));

app.get('/getExampleData', (req, res) => {
  const url = 'http://example.com/data';
  request(url, (err, response, body) => {
    if (!err && response.statusCode === 200) {
      res.send(body);
    } else {
      console.log('err', err);
      console.log('statusCode', response && response.statusCode);
      res.send('err');
    }
  });
});

app.listen(port, () => console.log(`Example app listening on port ${port}!`));

<!-- 客户端代码 -->
<button id="getDataBtn">获取数据</button>

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
  $('#getDataBtn').click(() => {
    $.getJSON('http://example.com/data', (jsonData) => {
      console.log(jsonData);
    });
  });
</script>

当我们运行客户端代码时，控制台会输出以下错误信息：

Access is denied. 堆栈跟踪: return window[ "eval" ].call( window, data ); (anonymous function) @jquery-3.5.1.min.js:2 (anonymous function) @jquery-3.5.1.min.js:2 xhr.onreadystatechange @jquery-3.5.1.min.js:2

这是因为IE浏览器不支持跨域请求。

我们可以修改客户端代码，使用代理来获取数据：

<button id="getDataBtn">获取数据</button>

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
  $('#getDataBtn').click(() => {
    $.getJSON('http://localhost:3000/getExampleData', (jsonData) => {
      console.log(jsonData);
    });
  });
</script>

这里将请求的url改为我们自己的服务器地址，然后通过我们的服务器转发请求到http://example.com/data上，并将请求到的数据转发回来。

示例二：使用jQuery.ajax()获取数据

我们可以使用jQuery.ajax()方法对之前示例的代码进行改写。代码如下所示：

<button id="getDataBtn">获取数据</button>

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
  $('#getDataBtn').click(() => {
    $.ajax({
      url: 'http://example.com/data',
      dataType: 'json',
      xhrFields: {
        withCredentials: true
      },
      crossDomain: true,
      success: (jsonData) => {
        console.log(jsonData);
      },
      error: () => {
        console.log('error');
      }
    });
  });
</script>

这里用$.ajax()代替$.getJSON()，并将请求方式设置为JSON，同时设置xhrFields和crossDomain来解决跨域问题。