服务器同源策略/解决跨域请求

1.服务器同源策略

同源策略，指的是浏览器对不同源的脚本或者文本的访问方式进行的限制。同源指两个页面具有相同的协议，主机（也常说域名），端口，三个要素缺一不可。同源策略就是为了保证网站的数据安全而存在。

2.URL构成：

url：http://image.baidu.com:80/search/detail?ct=503316480&z=undefined#headerhttp ---- 超文本传输协议[image.baidu.com] ---- 域名80 ---- 端口/search/detail ---- 资源目录ct=503316480&z=undefined ---- 发送到服务器的数据#header ---- 锚点

3.跨域

跨域是指在浏览器上进行非同源请求的行为

4.解决跨域问题的办法

1.jsonp方法

//jsonp发送ajax请求 function jsonp(options){ // 把options.success函数声明为全局函数 'mycallback' window[options.callbackName] = options.success; // 判断参数，如果是字符串，直接赋值给data var data = ''; if (typeof options.data === 'string'){ data = options.data; } // 判断参数，如果是对象，把对象格式化成参数序列的字符串再赋值给data if (typeof options.data === 'object' && options.data !== null && options.data.constructor === Object){ // 把{abc:123,ddd:777} 转成 'abc=123&ddd=777' for (var key in options.data){ data += key+'='+options.data[key]+'&'; } // data = 'abc=123&ddd=777&'; data = data.substring(0,data.length-1); } // 创建script标签，并且给src属性赋值（数据地址、参数、参数值） var Script = document.createElement('script'); Script.src = options.url+'?'+ options.cb +'='+options.callbackName+'&'+data; document.body.appendChild(Script); // script标签加载完成时，删除该标签 Script.onload = function (){ document.body.removeChild(Script); } }

1.2.jQuery 发送jsonp请求

$.ajax({ type: "get", //jsonp只能发送get请求 async: false,//不异步 url: "http://flightQuery.com/jsonp/flightResult.aspx?code=CA1998", dataType: "jsonp",//这里吧标注jsonp，jQ就判断发送jsonp请求 jsonp: "callback",//传递给请求处理程序或页面的，用以获得jsonp回调函数名的参数名 (一般默认为:callback) jsonpCallback:"flightHandler",//自定义的jsonp回调函数名称，默认为jQuery自动 生成的随机函数名，也可以写"?"，jQuery会自动为你处理数据 success: function(json){ alert('您查询到航班信息：票价： ' + json.price + ' 元，余票： ' + json.tickets + ' 张。'); }, error: function(){ alert('fail'); } });

2.CORS 跨域资源共享(xhr2)

CORS是一个W3C标准，全称是"跨域资源共享"（Cross-origin resource sharing）它允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制整个CORS通信过程，都是浏览器自动完成，不需要用户参与对于开发者来说，CORS通信与同源的AJAX通信没有差别，代码完全一样实现CORS通信的关键是服务端，只要服务端实现了CORS接口，就可以跨源通信示例： 实现CORS并不难，只需服务端做一些设置即可：如 <?php header("Access-Control-Allow-Origin:*"); // 允许任何来源 注意：IE10以下不支持CORS

3.代理跨域

在服务器上配置代理，然后请求代理标识符D:\phpstudy_pro\Extensions\Nginx1.15.11\conf\vhosts\localhost_80.conf # 配置代理 # https://www.duitang.com/napi/vienna/feed/list/by_common/?start=0&limit=18 # 当我们请求 http://localhost/dt 时，Nginx转发到 https://www.duitang.com/napi/vienna/feed/list/by_common/ location = /dt { proxy_pass https://www.duitang.com/napi/vienna/feed/list/by_common/; }

！！！ 以上是DaXiong本人对前端知识的理解总结，如内容知识有错误可以留言修改。

！！！如果以上内容帮助到了你，点击一下赞或者收藏吧！