怎么在前端跨域获取json文件内容
时间: 2023-12-26 11:06:11 浏览: 39
在前端跨域获取json文件内容,可以通过以下两种方式实现:
1. JSONP跨域
JSONP(JSON with Padding)是一种跨域解决方案,通过动态添加`<script>`标签来获取跨域数据。具体实现步骤如下:
- 在服务端定义一个回调函数,将需要返回的数据作为函数的参数传递给该函数,并将函数名作为参数传递给前端。
- 在前端定义一个函数,该函数名与服务端定义的函数名一致,用于接收服务端返回的数据。
- 在前端通过动态添加`<script>`标签的方式请求服务端数据,并将函数名作为参数传递给服务端,服务端返回的数据会作为函数的参数传递给前端函数。
示例代码:
服务端:
```javascript
function getData(callback) {
var data = {
name: '张三',
age: 18
};
callback(data);
}
app.get('/jsonp', function(req, res) {
var callback = req.query.callback;
getData(function(data) {
res.send(callback + '(' + JSON.stringify(data) + ')');
});
});
```
前端:
```javascript
function handleData(data) {
console.log(data);
}
var script = document.createElement('script');
script.src = 'http://localhost:3000/jsonp?callback=handleData';
document.body.appendChild(script);
```
2. CORS跨域
CORS(Cross-Origin Resource Sharing)是一种跨域解决方案,通过在服务端设置响应头来允许跨域请求。具体实现步骤如下:
- 在服务端设置响应头,允许跨域请求。
- 在前端发送跨域请求,并在请求头中添加`Origin`字段,表示请求来源。
- 服务端接收请求,并根据请求头中的`Origin`字段判断是否允许跨域请求,如果允许则在响应头中添加`Access-Control-Allow-Origin`字段,表示允许该请求来源跨域。
示例代码:
服务端:
```javascript
app.get('/cors', function(req, res) {
res.set('Access-Control-Allow-Origin', '*');
var data = {
name: '张三',
age: 18
};
res.send(JSON.stringify(data));
});
```
前端:
```javascript
var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://localhost:3000/cors');
xhr.setRequestHeader('Origin', 'http://localhost:8080');
xhr.onload = function() {
console.log(xhr.responseText);
};
xhr.send();
```