问卷项目--js跨域

Posted 2020-07-06

    项目中因为要把问卷投放到第三方，并且对方要收集统计数据，因此在调用对方接口的时候就会存在跨域的问题。

1. 什么叫js跨域

    浏览器不允许javascript跨域请求其他域名下的内容。端口号不同，主域相同子域不同，协议不同，不同域名等等情况

    下面表格里的a.js是无法获取b.js的内容的。

情况	举例
端口号不同	http://www.baidu.com/a.js   vs.  http://www.baidu.com:8080/b.js
主域相同子域不同	http://www.baidu.com/a.js   vs.  http://blog.baidu.com/b.js
协议不同	http://www.baidu.com/a.js   vs.  https://www.baidu.com/b.js
域名不同	http://www.baidu.com/a.js   vs.  http://www.qq.com/b.js
域名和对应ip	http://www.baidu.com/a.js   vs.  http://192.168.2.2/b.js

    当然在实际应用中，多数出现在ajax请求时，在不同域下请求数据会遇到禁止跨域的问题。

    例如网站接口是www.baidu.com/get/userinfo?id=123 ，返回的数据{data:{name:‘xxx’,password: ‘123‘}}。如果在其他域下例如域名是www.qq.com/…发送get请求则无法返回数据，浏览器会提示因为同源策略而禁止请求发送。

2. 禁止js跨域的原因

    首先来谈一下为什么要禁止js跨域。通过各方总结，我个人的理解是js之所以要禁止跨域是防止某些恶意的开发者通过接口来向网站发起请求，获取数据库中的重要数据，例如用户名，密码等。

    所以浏览器禁止js跨域请求数据。说白点就是浏览器不允许你去拿别人网站的东西。

那么有的时候我们需要进行这种跨域请求操作，例如问卷这个项目，怎么办。。

3. js跨域解决方法

    之前看了网上很多帖子和方法，我想在这里说的是，只要是解决js跨域问题，都必须在服务器端做修改。因为只有对方允许你进行操作，你才能进行相应的读写操作，否则如果服务器不用做任何改动，那浏览器禁止跨域还有什么意义呢。

    接下来说一下常见的几种解决方案：

    1.  服务器端修改字段

    服务器端设置 Access-Control-Allow-Origin：* 或者 Access-Control-Allow-Origin：www.baidu.com

    2.  jsonp的格式

    有两种方式：

        1>利用script src标签，因为浏览器并没有禁止引用跨域的js代码，因此可以把数据放在函数的形参里，返回给页面。页面设置好方法名后就可以调用参数了。

        （占坑。。）

        2>利用ajax的get方法，返回jsonp格式数据。

        （占坑。。）

    3. iframe方式（主域相同子域不同）-- document.domain

   （占坑。。）

    4. html5方式 -- window.postMessage

   （占坑。。）

    5. window.name

   （占坑。。）