由于js同源策略的影响，当在某一域名下请求其他域名，或者同一域名，不同端口下的url时，就会变成不被允许的跨域请求。
那这个时候通常怎么解决呢，对此菜鸟光头我稍作了整理：
1.JavaScript
在原生js（没有jQuery和ajax支持）的情况下，通常客户端代码是这样的（我假设是在localhost：8080的端口下的http://localhost:8080/webs/i.mediapower.mobi/wutao/index.html页面的body标签下面加入以下代码）：
[removed]
var xhr = new XMLHttpRequest();
xhr.ope
JavaScript中的跨域请求是Web开发中的一个重要话题，由于同源策略的限制，浏览器不允许JavaScript从一个源（域名、协议和端口的组合）获取另一个源的数据。为了解决这个问题，开发者通常采用以下三种常见的跨域请求方法：
1. JSONP（JSON with Padding）
JSONP是一种绕过同源策略的技术，它利用`<script>`标签可以跨域加载资源的特性。当服务器支持JSONP时，客户端会在请求中添加一个`callback`参数，指定一个函数名。服务器接收到请求后，会将返回的数据包装在这个函数名内，例如`callbackfunction({“name”:”wwwwwwwwwwww”})`。客户端预先定义好这个函数，当`<script>`标签加载完成并执行时，就会调用这个函数并传入服务器返回的数据。
示例代码：
```html
<script>
var callbackfunction = function(data) {
console.log('我是跨域请求来的数据-->' + data.name);
};
</script>
<script src="http://i2.mediapower.mobi/adpower/vm/Bora/js/test.js?callback=callbackfunction"></script>
```
2. CORS（Cross-Origin Resource Sharing）
CORS是现代浏览器支持的一种跨域请求方式，它需要服务器端的配合。服务器需要在HTTP响应头中设置`Access-Control-Allow-Origin`字段，指定哪些源可以访问其资源。这种方式可以支持所有类型的HTTP请求，包括GET、POST等，而且能携带Cookie。
示例代码（使用jQuery的`$.ajax()`）：
```javascript
$(function() {
$.ajax({
async: false,
type: "GET",
dataType: 'json',
url: "http://i2.mediapower.mobi/adpower/vm/Bora/js/test.js",
crossDomain: true,
success: function(data) {
console.log(data);
},
error: function(jqXHR, textStatus, errorThrown) {
console.error(textStatus, errorThrown);
}
});
});
```
这里需要注意，CORS请求通常需要服务器返回`Access-Control-Allow-Origin`头部，否则浏览器会阻止数据的接收。
3. CORS与JSONP的对比
- JSONP仅支持GET请求，而CORS支持所有HTTP请求方法。
- JSONP是通过动态创建`<script>`标签实现的，而CORS需要服务器端设置响应头。
- JSONP比CORS更兼容老版本的浏览器，但安全性较弱，因为任何可以注入`<script>`标签的地方都可能触发JSONP请求。
- CORS提供了更多的控制，如预检请求（OPTIONS）、允许的HTTP头、以及是否允许携带Cookie等。
以上就是JavaScript跨域请求数据的三种常见方法。在实际开发中，选择哪种方法取决于项目需求、兼容性考虑以及服务器端的配合程度。对于需要复杂交互或安全性要求较高的场景，CORS可能是更好的选择；而对于简单的GET请求和旧浏览器的兼容性，JSONP则是一个实用的解决方案。
