前端ajax发请get求跨域
时间: 2023-10-06 17:08:13 浏览: 42
前端使用 AJAX 发送 GET 请求跨域,可以通过以下几种方式解决:
1. JSONP(JSON with Padding):JSONP 是一种跨域请求的解决方案,它利用 script 标签的 src 属性不受同源策略限制的特性来实现跨域请求。服务器需要将响应包装在一个函数调用中返回给客户端,并在客户端定义一个同名的回调函数来处理响应数据。
```javascript
function handleResponse(data) {
// 处理响应数据
}
var script = document.createElement('script');
script.src = 'http://example.com/api?callback=handleResponse';
document.body.appendChild(script);
```
2. CORS(Cross-Origin Resource Sharing):CORS 是一种跨域请求的标准,通过在服务器端设置响应头来允许跨域请求。在客户端发送 GET 请求时,浏览器会自动在请求头中添加 Origin 字段,服务器端需要在响应头中添加 Access-Control-Allow-Origin 字段来指定允许跨域访问的域名。
```javascript
var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://example.com/api', true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
// 处理响应数据
}
};
xhr.send();
```
3. 代理服务器:使用代理服务器是一种常见的解决跨域请求的方式。前端发送 GET 请求到同源的代理服务器,再由代理服务器转发请求到目标服务器,并将响应返回给前端。
```javascript
var xhr = new XMLHttpRequest();
xhr.open('GET', '/proxy/api', true); // 同源的代理服务器地址
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
// 处理响应数据
}
};
xhr.send();
```
以上是几种常见的解决前端 AJAX 发送 GET 请求跨域的方式,根据实际情况选择合适的解决方案。