面试问到数据交互的时候，经常会问跨域如何处理。大部分人都会回答JSONP，然后面试官紧接着就会问：“JSONP缺点是什么啊？”这个时候坑就来了，如果面试者说它支持GET方式，然后面试官就会追问，那如果POST方式发送请求怎么办？基础扎实一些的面试者会说，使用CORS跨域，不扎实的可能就摇摇头了。

这还没结束，如果公司比较正规或者很在乎技术功底，你面试的又是重要岗位，HR还想砍你的工资，就会再补一刀，CORS跨域有什么问题呢？这时候能回答上来的就没几个了，就算是你答出来兼容性不好，需要IE10+浏览器,对方依然有话说，那兼容性怎么处理呢？应试者就没话了，要么被Pass掉，即便留下来，谈工资的时候就没底气了。

CORS跨域实在是面试官pass一个人的利器。

为什么会这样呢？

1.遇到CORS请求的情况不多，开发者使用这个场景的很少，大部分都JSONP搞定了。

2.开发者自身技能不扎实，偷懒心态，平常没有意识和意愿去提升自己的技术水平。

3.相关的学习资料少、纯前端小白搭建可测试的环境难度大。

面对这条拦路虎，我们今天就彻底解决掉它，让它不再是我们的软肋，而是彰显我们技术实力的亮点。

首先，什么是CORS?



CORS是一个W3C标准，全称是"跨域资源共享"（Cross-origin resource sharing）。

它允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。

优缺点

优点：



1.支持POST以及所有HTTP请求

2.安全性相对JSOP更高

3.前端要做的事儿比较少

缺点：



1.不兼容老版本浏览器，如IE9及其以下

2.需要服务端支持

3.使用起来稍微复杂了些

怎么用？

前端部分：



<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>CORS跨域请求</title>

    <script>

        function createCORSRequest(method, url) {

            var xhr = new XMLHttpRequest();

            if ("withCredentials" in xhr) {

                xhr.open(method, url, true);

            } else if (typeof XDomainRequest != "undefined") {

                xhr = new XDomainRequest();

                xhr.open(method, url);

            } else {

                xhr = null;

            }

            return xhr;

        }

        window.onload = function () {

            var oBtn = document.getElementById('btn1');

            oBtn.onclick = function () {

                var xhr = createCORSRequest("get", "http://wpdic.com/cors.php");

                if (xhr) {

                    xhr.onload = function () {

                        var json = JSON.parse(xhr.responseText);

                        alert(json.a);

                    };

                    xhr.onerror = function () {

                        alert('请求失败.');

                    };

                    xhr.send();

                }

            };

        };

    </script>

</head>

<body>

    <input type="button" value="获取数据" id="btn1">

</body>

</html>

注意点：

1.上面代码兼容IE8,因为用了XDomainRequest

2.其它代码你就当成XMLHttpRequset用，别考虑什么2.0不2.0的

3.如果你想post数据，可以往 xhr.send()里面搞

4.这里不建议大家研究"simple methdod"之类的知识，代码弄懂了会用就行，遇到问题了再查也不晚

后台部分：



<?php

header('content-type:application:json;charset=utf8');

header('Access-Control-Allow-Origin:*');

header('Access-Control-Allow-Methods:GET,POST');

header('Access-Control-Allow-Credentials: true');

header('Access-Control-Allow-Headers:x-requested-with,content-type');

$str = '{"a":1,"b":2,"c":3,"d":4,"e":5}';

echo $str;

?>

注意点：

1.Access-Control-Allow-Origin: 表示允许任何域名跨域访问，如果需要指定某域名才允许跨域访问，只需把Access-Control-Allow-Origin:改为Access-Control-Allow-Origin:允许的域名,实际工作也要这么做2.Access-Control-Allow-Methods:GET,POST 规定允许的方法，建议控制严格些，不要随意放开DELETE之类的权限

2.Access-Control-Allow-Credentials

该字段可选。它的值是一个布尔值，表示是否允许发送Cookie。默认情况下，Cookie不包括在CORS请求之中。设为true，即表示服务器明确许可，Cookie可以包含在请求中，一起发给服务器。这个值也只能设为true，如果服务器不要浏览器发送Cookie，删除该字段即可。

最后，面试常考问题：

CORS和JSONP的应用场景区别？



CORS要求浏览器(>IE10)和服务器的同时支持，是跨域的根本解决方法，由浏览器自动完成。优点在于功能更加强大支持各种HTTP Method，缺点是兼容性不如JSONP。

原文地址：https://segmentfault.com/a/1190000017149446

一篇文章搞明白CORS跨域的更多相关文章

  1. 一篇文章搞明白Integer、new Integer() 和 int 的概念与区别

    基本概念的区分 1.Integer 是 int 的包装类,int 则是 java 的一种基本数据类型 2.Integer 变量必须实例化后才能使用,而int变量不需要 3.Integer 实际是对象的 ...

  2. ajax——CORS跨域调用REST API 的常见问题以及前后端的设置

    RESTful架构是目前比较流行的一种互联网软件架构,在此架构之下的浏览器前端和手机端能共用后端接口. 但是涉及到js跨域调用接口总是很头疼,下边就跟着chrome的报错信息一起来解决一下. 假设:前 ...

  3. 【从零开始搭建自己的.NET Core Api框架】（五）由浅入深详解CORS跨域机制并快速实现

    系列目录 一.  创建项目并集成swagger 1.1 创建 1.2 完善 二. 搭建项目整体架构 三. 集成轻量级ORM框架——SqlSugar 3.1 搭建环境 3.2 实战篇:利用SqlSuga ...

  4. JSONP跨域和CORS跨域

    什么是跨域? 跨域:指的是浏览器不能执行其它网站的脚本,它是由浏览器的同源策略造成的,是浏览器的安全限制! 同源策略 同源策略:域名.协议.端口均相同. 浏览器执行JavaScript脚本时,会检查这 ...

  5. CORS跨域模型浅析及常见理解误区分析

    CORS跨域资源共享是前后端跨域十分常用的一种方案,主要依赖Access-Control-Allow(ACA)系列header来实现一种协商性的跨域交互. 基本模型 其中的具体流程大致可以分为以下几步 ...

  6. SpringBoot添加支持CORS跨域访问

    原文:https://www.jianshu.com/p/c6ea21b64f6e CORS(Cross-Origin Resource Sharing)"跨域资源共享",是一个W ...

  7. 前后端分离 导致的 静态页面 加载 <script type="module" > 报CORS 跨域错误，提示 blocked by CORS policy

    1.前言 静态页面 加载 <script type="module" > 报CORS 跨域错误,提示Access to script at ftp:///xxx.js ...

  8. 如何在ASP.NET Core中实现CORS跨域

    注:下载本文的完整代码示例请访问 > How to enable CORS(Cross-origin resource sharing) in ASP.NET Core 如何在ASP.NET C ...

  9. Web APi之手动实现JSONP或安装配置Cors跨域（七）

    前言 照理来说本节也应该讲Web API原理,目前已经探讨完了比较底层的Web API消息处理管道以及Web Host寄宿管道,接下来应该要触及控制器.Action方法,以及过滤器.模型绑定等等,想想 ...

随机推荐

  1. Codeforces Gym101606 A.Alien Sunset (2017 United Kingdom and Ireland Programming Contest (UKIEPC 2017))

    2017 United Kingdom and Ireland Programming Contest (UKIEPC 2017) 寒假第一次组队训练赛,和学长一起训练,题目难度是3颗星,我和猪队友写 ...

  2. 牛客网 牛客练习赛11 D.求距离

    D.求距离 链接:https://www.nowcoder.com/acm/contest/59/D来源:牛客网 时间限制:C/C++ 1秒,其他语言2秒空间限制:C/C++ 32768K,其他语言6 ...

  3. Java实验--关于课上找“水王”问题分析

    问题的表述就是说有那么一个人,他在一个论坛上发帖,然后每贴必回,自己也发帖.那么这个人在发帖的数目上就超过了整个论坛的帖子数目的一半以上. 我对这个问题一开始的思路是,用SQL语句获取整个列表中的数据 ...

  4. PHP平均小数红包算法

    <?php function RandMoney( $money,$num ){ $arr = array();//存放金额 $total_money = 0;//红包总金额 $thisMone ...

  5. Android获取状态栏和标题栏的高度

    版权声明:本文为博主原创文章,未经博主允许不得转载. 1.获取状态栏高度: decorView是window中的最顶层view,可以从window中获取到decorView,然后decorView有个 ...

  6. excel怎么把文本格式的数字转换为数字，且把前面的撇号去掉

    excel把文本格式的数字转换为数字,且把前面的撇号去掉方法:1.选中要处理的列,在“数据”菜单下,选择“分列”.2.在“分列”向导对话框里,选择“分隔符号”,并点击下一步.3.在“分列”向导对话框第 ...

  7. linux 中两个文档怎么对比内容是否一致

    可以用diff命令对比文档内容.[语法]: diff [参数] 文件1 文件2[说明]: 本命令比较两个文本文件,将不同的行列出来-b 将一串空格或TAB 转换成一个空格或TAB-e 生成一个编辑角本 ...

  8. mac 下 virtualbox 配置全网通

    mac下virtualbox实现主机和虚拟机.虚拟机和外网互访的方案 全局添加Host-Only网络 Adapter IPv4 Address:192.168.56.1 IPv4 Network Ma ...

  9. byte 单位换算

    1G就1GB啦,平时人们说1G只是简洁来说而已. bit(位).B(字节).K(千).M(兆).G(吉咖).T(太拉) B(Byte).KB(KiloByte).MB(MegaByte).GB(Gig ...

  10. HEVC的參考队列解码

    參考队列是指在进行帧间解码时.P或者B slice所參考的已解码的.位于解码图像缓存中(DPB, decoded picture buffer)中的图像队列,类似h264中的reflist0和refl ...