JS中的跨域问题

跨域访问出错信息:No ‘Access-Control-Allow-Origin‘ header is present on the requested resource. Origin ‘http://localhost:9100‘ is therefore not allowed access. The response had HTTP status code 400.

1、跨域的概念

跨域是指从一个域名的网页去请求另一个域名的资源。比如从www.baidu.com 页面去请求 www.google.com 的资源。由于浏览器的同源策略跨域访问会受到限制。同源策略指的是域名、协议、端口号都相同,只要 协议,域名,端口有任何一个的不同,就被当作是跨域。

URL由协议+主机名/域名+端口+路径+查询字符串+信息片段组成。

http://mail.163.com:8000/index.html
http://:是协议;mail:是服务器名;163.com:是域名;mail.163.com:这个是主机名(网站名),由服务器名+域名组成;8000:是端口号

1.1、限制跨域访问的原因

安全问题:如果一个网页可以随意地访问另外一个网站的资源,那么就有可能在客户完全不知情的情况下出现安全问题。比如用户登录银行网站时浏览器可能缓存用户的账号及密码,当用户登录其他网站时如果不加以限制,该网站可能拿到用户的密码信息并发送到银行网站进行操作。

但是有时跨域访问也是需要的,比如有时公司内部有多个不同的子域,比如一个是location.company.com ,而应用是放在app.company.com , 这时想从 app.company.com去访问 location.company.com 的资源就属于跨域。

2、跨域的解决方法

2.1、通过JSONP实现跨域

JSONP 是 JSON with padding(填充式 JSON 或参数式 JSON)的简写,是应用 JSON 的一种新方法。JSONP 看起来与 JSON 差不多,只不过是被包含在函数调用中的 JSON, 比如:

callback({ "name": "Nicholas" });   //callback:回调函数名  JSONP可以看做就是一段以json为参数的函数调用代码

JSONP 由两部分组成:回调函数和数据。回调函数是当响应到来时应该在浏览器页面中调用的函数。

JSONP 是通过<script>标签来使用的,使用时可以为src 属性指定一个跨域 URL。这里的<script>元素与<img>元素类似,都有能力不受限制地从其他域加载资源。因为 JSONP 是有效的 JavaScript 代码,所以在请求完成后,即在 JSONP 响应加载到页面中
以后,就会立即执行。

JSONP的原理:通过script标签引入一个 js 文件,这个 js 文件载入成功后会自动执行在 src 参数中指定的回调函数,并且后端会设计把需要的 json 数据作为参数传入。所以 jsonp 是需要服务器端进行配合设计的,即后端需获得前端传过来的回调函数名,并把需要的json数据作为参数,然后把一段回调函数执行的代码返回,当前端加载到后端页面时将受到后端返回的那段代码,然后自动执行回调函数。

//前端代码
<script type="text/javascript">
    function dosomething(jsondata){
        console.log(‘数据:‘, jsondata)
    }
</script>
<script src="http://example.com/data.php?callback=dosomething"></script>

//后端代码
<?php
$callback = $_GET[‘callback‘];//获取前端传来的回调函数名
$data = array(‘a‘,‘b‘,‘c‘);//这是要返回的数据
echo $callback.‘(‘.json_encode($data).‘)‘;//输出 JSONP ,前端拿到这个输出将会执行这段代码
?>

可以通过动态创建 script 标签来实现 JSONP,这样就不用在 html结构上添加额外的script标签了

function handleResponse(response){
  console.log(‘数据:‘,response);
}
var script = document.createElement("script");
script.src = "http://freegeoip.net/json/?callback=handleResponse";
document.body.insertBefore(script, document.body.firstChild); 

//或者使用jQuery实现
<script type="text/javascript">
    $.getJSON(‘http://example.com/data.php?callback=?,function(jsondata)‘){
        console.log(‘数据:‘,jsondata);
    });
</script>

2.2、CORS实现跨域

CORS跨域资源共享,定义了必须在访问跨域资源时,浏览器与服务器应该如何沟通。

对于前端开发者来说,CORS通信与同源的AJAX通信没有差别,代码完全一样。实现CORS通信的关键是服务器端,只要服务器实现了CORS接口,就可以跨源通信。如果服务器端实现了CORS,在进行AJAX请求时,浏览器一旦发现AJAX请求跨源,就会自动添加一些附加的头信息,有时还会多出一次附加的请求。

CORS背后的基本思想就是使用自定义的HTTP头部让浏览器与服务器进行沟通,从而决定请求或响应是应该成功还是失败。

服务器端对于CORS的支持,主要就是通过设置Access-Control-Allow-Origin来进行的。如果浏览器检测到相应的设置,就可以允许Ajax进行跨域的访问。只需要在后台中加上响应头来允许域请求!

//指定允许其他域名访问
‘Access-Control-Allow-Origin:*‘//或指定域
//响应类型
‘Access-Control-Allow-Methods:GET,POST‘
//响应头设置
‘Access-Control-Allow-Headers:x-requested-with,content-type‘
//前端代码,跟一般ajax访问无区别
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
  if (xhr.readyState == 4 && xhr.status == 200) {
    console.log(xhr.responseText)
  }
}
xhr.open(‘GET‘, ‘http://192.168.2.186:8081/KuayuAjax/server.php‘, true);
xhr.send(null);

//后端代码

<?php

header("Content-Type:text/plain");

header("Access-Control-Allow-Origin:http://localhost:8081");//设置头部,不设置的话请求会被拒绝

echo ‘{"src":"http://www.pinkbluecp.cn/face_alignment/img/picture.jpg"}‘;

?>

原文地址:https://www.cnblogs.com/wenxuehai/p/10371692.html

时间: 2024-11-09 00:43:46

JS中的跨域问题的相关文章

js中各种跨域问题实战小结(二)

这里接上篇:js中各种跨域问题实战小结(一) 后面继续学习的过程中,对上面第一篇有稍作休整.下面继续第二部分: -->5.利用iframe和location.hash -->6.window.name跨域实现 利用iframe和location.hash实现跨域 想必有很多人像我之前一样,或许只知道上面文中所说的那几种方法.所以,我刚了解到可以用iframe和location.hash来实现跨域的时候,我会想,为什么他们可以实现.iframe是什么,有什么特性,location.hash是什么

JS 中的跨域请求

跨域请求并不仅仅只是 Ajax 的跨域请求,而是对于一个页面来说,只要它请求了其他域名的资源了,那么这个过程就属于跨域请求了. 比如,一个带有其他域名的 src 的 <img> 标签,以及页面中引入的其他第三方的 CSS 样式等. 对于 img 以及 CSS 而言,跨域请求本身并没有更多的安全问题,因为这些请求都属于只读请求,并不会对源资源造成副作用. 而如果跨域请求是从脚本里面发出去的,由于脚本具有高度灵活性,浏览器出于安全考虑,会根据同源策略来限制它的功能,使得正常情况下,脚本只能请求同源

js中各种跨域问题实战小结

什么是跨域?为什么要实现跨域呢? 这是因为JavaScript出于安全方面的考虑,不允许跨域调用其他页面的对象.也就是说只能访问同一个域中的资源.我觉得这就有必要了解下javascript中的同源策略是怎么回事了:javascript的同源策略 于是当我们想某些特定的功能的时候,实现合理的跨域请求就显得比较重要了. -->1.原生Ajax对象xhr的跨域 -->2.简单jsonp -->3.图像Ping -->4.document.domain+iframe实现跨域 javascr

php中ajax跨域请求---小记

php中ajax跨域请求---小记 前端时间,遇到的一个问题,情况大约是这样: 原来的写法: 前端js文件中: $.ajax({ type:'get', url:'http://wan.xxx.com/xxx.js', success:function(data){ ......... } }) 很简单的一个ajax请求:后面在做迁移的时候,由于系统目录的安排,js文件放到了,img.xxx.com域名下,这样就设计到了跨域问题,于是就改成了这样: $.ajax({ type:'get', ur

vue.js学习之 跨域请求代理与axios传参

vue.js学习之 跨域请求代理与axios传参 一:跨域请求代理 1:打开config/index.js module.exports{ dev: { } } 在这里面找到proxyTable{},改为这样: proxyTable: { '/api': { target: 'http://121.41.130.58:9090',//设置你调用的接口域名和端口号 别忘了加http changeOrigin: true, pathRewrite: { '^/api': ''//这里理解成用'/ap

ASP.NET MVC中设置跨域

ASP.NET MVC中设置跨域 1.什么是跨域请求 js禁止向不是当前域名的网站发起一次ajax请求,即使成功respone了数据,但是你的js仍然会报错.这是JS的同源策略限制,JS控制的并不是我们网站编程出现了问题.客户端(网页)和后台编程都可以有效解决这个问题.客户端可以通过JSONP来完成跨域访问:在ES6中为了解除同源策略问题,想出一个办法:当被请求网站为响应头respone添加了一个名为Access-Control-Allow-Origin的header,设置其值等于发起请求网站的

【JS】AJAX跨域-被调用方与调用方解决方案(二)

解决跨域问题 跨域问题说明,参考[JS]AJAX跨域-JSONP解决方案(一) 实例,使用上一章([JS]AJAX跨域-JSONP解决方案(一))的实例 解决方案三(被调用方支持跨域) 被调用方解决,基于支持跨域的解决思路,基于Http协议关于跨域的相关规定,在响应头里增加指定的字段告诉浏览器,允许调用 跨域请求是直接从浏览器发送到被调用方,被调用方在响应头里增加相关信息,返回到页面,页面能正常获取请求内容. 1.服务端增加一个过滤器(CrossFilter.java),过滤所有请求,在请求响应

ASP.NET中Cookie跨域的问题及解决代码

ASP.NET中Cookie跨域的问题及解决代码 http://www.liyumei.net.cn/post/share18.html Cookies揭秘  http://www.cnblogs.com/zhangziqiu/archive/2009/08/06/cookies-javascript-aspnet.html 最近在项目开发中遇到一个很棘手的问题,一个用户在顶级域名登录后,跳转到自己所拥有的二级域名下管理二级网站时,cookie丢失了,一直找解决办法找了整整两天,百度谷歌一大堆,

关于jQuery中$.ajax()跨域

今天研究了一些用jquery $.ajax跨域的方法,总结了一些注意事项如下: 首先,跨域JSONP不是AJAX.它不使用XMLHttpRequest.只不过是一个动态脚本元素加载JavaScript代码. Cross-domain JSONP isn't AJAX at all. It doesn't use XMLHttpRequest. It's nothing more than a dynamic script element that loads JavaScript code. Y