前端对向http://10.133.5.111:7021/esb-new发起请求时,如何用JSONP解决跨域的问题
时间: 2024-12-18 09:36:55 浏览: 7
当前端需要从`http://10.133.5.111:7021/esb-new`这个域名之外的服务器获取数据,并且由于浏览器的同源策略(CORS)限制导致跨域问题时,可以使用JSONP(JSON with Padding)技术。
JSONP的基本原理是利用动态插入 `<script>` 标签的方式来进行异步通信。它利用了HTML允许脚本标签跨域加载资源的特点。步骤如下:
1. 客户端(前端)创建一个`<script>`标签,其中src属性指向你要请求的URL,同时在URL中加入一个回调函数名作为参数,如:
```javascript
var script = document.createElement('script');
script.src = 'http://10.133.5.111:7021/esb-new?callback=handleData';
```
2. 在URL后添加的`callback=handleData`,这里的`handleData`是你预先定义的一个函数名,服务端会在响应中包含这个函数调用,例如返回类似这样的JSON数据:
```json
handleData({"data": "your json data"});
```
3. 当服务端接收到请求并处理数据后,会将数据包裹在一个全局函数中返回,然后客户端的`handleData`函数会被触发,从而接收到JSON数据。
4. `handleData`函数在客户端捕获到这个数据,然后解析出来使用。
需要注意的是,因为`<script>`标签只支持GET请求,所以JSONP只能用于GET请求,并且服务器需要能够识别并处理这种形式的数据包。
阅读全文