解决ajax跨域问题

前端工程师面试中，经常遇到有关‘跨域’的面试题。‘跨域’是作为一个前端工程师无法避开的问题。那么，我们看看面试官怎么问（什么是跨域？谈谈你对跨域的理解？什么导致了跨域？你解决过跨域问题吗？你在工作中怎么解决跨域？跨域解决方案有哪些，了解过哪些？前后端分离，你有遇到跨域问题吗？...那么，带着这些问题，我们来分析一下，如何回答）
===========================================================
那么各位亲爱的学员，你对跨域了解吗？前后端分离，你遇到跨域问题了吗？
跨域时，项目考虑安全性问题，后端设置通用允许跨域，是否有风险呢？
前端跨域，一共有多少种解决方案，你知道吗？
面试中，跨域问题，怎么说能体现你技术深度和广度，你知道吗？（空）
今天我们就来重点解决一下面对，“工作中遇到的跨域问题如何解决？”这个问题怎样回答才能够体现出我们的技术水准。

问题分析

1. 小白(罗列技术点)

我们经常看到的回答一般是这样的，“跨域问题可以使用CORS设置请求头来解决，或者使用jsonp技术解决”。或者“我在工作中遇到过跨域问题，我是用jsonp解决的，还可以使用代理来解决”。

这几种回答比较笼统苍白，还停留在小白的水准，而且还容易引起面试官的追问，当然啦，如果是水平较高的同学，使用这种“留槛”的方式和面试官形成互动也未尝不可。那么我们来看一下技术大牛会怎么回答这个问题呢？

2. 大牛(技术深度、广度)

“对于跨域这个问题我个人的理解是这样的，首先，跨域问题的提出是基于同源策略的概念，也就是协议、域名、端口号三者保持一致才允许通信。跨域可以分为数据请求跨域和DOM查询跨域。那么我了解到的常见的跨域方式有以下几种：

① 可以使用的jsonp方式，它需要前后端相互配合，原理是使用src本身支持跨域，低版本浏览器也可以使用，缺点是它只支持get方法，且只可以用于传递数据无法进行DOM查询，而且必须要后端配合，安全性低，然而实际工作中很容易遇到后端不提供跨域的情况。

②还可以使用CORS设置请求头使其允许跨域，这种方式的优点是支持所有请求方式，也可以进行DOM查询，缺点是早期的浏览器不支持，并且也要求有后端的配合。

③还可以使用iframe配合window自带的name属性，这种方式优点是操作简单，不要求后端配合，缺点是name的大小有限制，一般是2M左右。

④此外还有h5新增的postMessage方法，通过onmessage的监听来接收数据，好处是使用简单，缺点是早期浏览器不支持。

⑤还可以通过修改document.domain来实现跨域，只需要把两个网页的domain设置为一个主域即可，优点也是支持DOM查询，操作简便，缺点是它只适用于相同主域的子域之间进行跨域。后端通常会通过在服务器上设置代理页面的方式实现跨域，这里我们就不多阐述了。

那么这些方式中我经常使用的是jsonp，它的原理是通过前后端配合实现跨域，运用了script标签的src属性可以跨域引入文件的特性。
前端部分：定义一个函数用于接收参数。并且创建script标签，其中的src 属性引入后台的PHP或其他文件，通过get方式拼接(‘?callback=fn’)传给后台该函数的函数名。

后台部分：后台接收到后返回一个‘调用该同名函数并传入参数’格式的字符串（‘fn([a,b,c])’）,前端接收到该字符串后，自动解析并调用该函数完成参数接收”。
大牛的回答在深度上，阐述了跨域问题出现的原因，jsonp的具体实现原理，在广度上，提供了多种跨域方式，并分析了各个方式的优缺点和应用场景，体现出了深厚的知识积累。但是这样的回答就已经是最好的了吗？不，我们来看一下，如果是面试大神，他会在怎么处理这个问题。

3. 大神(融入项目、技术延伸)

支持跨域有：

1、jsonp。
2、iframe配合window自带的name属性来处理。
3、h5新增的postMessage来操作。

当然这些解决方案都不是常用方式，在实际开发当中并不实用，我来说说我在实际开发当中与后端配合的实际场景吧：如果是开发app那么就不符合同源策略肯定会出现跨域问题，那么我会让后端人员开启跨域功能，如果是php添加header("Access-Control-Allow-Origin: *")，如何是java添加response.setHeader("Access-Control-Allow-Origin", "*")，可以解决跨域问题，那么安全问题需要https协议来解决抓包软件截取数据。

如果后端人员不配合开启跨域权限怎么办呢？

其实后端人员不配合开启跨域是常有的事情，比如银行系统为了安全问题是不可能开启跨域的，他们会说：“你先在测试环境下开发，等上传到服务器上接口和网站是同一个域名就不存在跨域的问题。”但是咱们在本地开发还是会出现跨域问题，那么就需要安装chrome浏览器的cors插件来解决开发环境下面的跨域问题，等开发完成后上传到正式服务器就ok啦。

那么分析到这里，我们就有了比较完善的回答思路了。我们的回答要在深度和广度上进行延伸和扩展，还要多运用具体的应用场景帮助表述，这样既能体现我们技术上的水平很高，又能让我们的回答具有可信度。这样的回答比较值得大家参考。