400 186 1886
这是之前面试的时候面试官提问的一道面试题。
具体题目是：为什么表单提交不会出现跨域，而使用 Ajax 发送 post 请求时却会出现跨域的情况。
那什么情况下会出现跨域：
协议 + 域名 + 端口 三者只要有一个不一样，就会出现跨域。
那为什么表单能够跨域发送请求，而 Ajax 却不能发送跨域请求
归根结底：跨域是为了阻止用户读取到另一个域名下的内容
而 Ajax 可以获取响应，但浏览器认为这不安全，所以拦截了响应
但是表单并不会获取新的内容，所以可以发起跨域请求。
前者是发送跨域请求给到后端，并不去接收服务器返回的信息
后者是发送跨域请求给到后端，并接收服务器返回的信息
那该如何解决跨域
#方法一：使用 JSONP
原理是利用<script>标签的跨域特性，可以不受限制地从其他域中加载资源
js
代码解读
复制代码function jsonp(options) { var script = document.createElement('script'); // 参数处理 var params = ''; for (var attr in options.data) { params += '&' + attr + '=' + options.data[attr]; } // 设置回调函数 var successCallback = `successCallback`; window[successCallback] = options.success; script.src = options.url + '?callback=' + successCallback + params; document.body.appendChild(script);}代码解释：
请求成功后，前端得执行回调函数，但 script 脚本是执行不到 success() 方法的。
这是因为 success() 方法 并不是 全局函数，所以需要将 success() 方法 改成全局函数
js
代码解读
复制代码var successCallback = `successCallback`;window[successCallback] = options.success;并在请求参数的基础上，需要添加 callback 参数，值对应需要回调的函数名
js
代码解读
复制代码script.src = options.url + '?callback=' + successCallback + params;使用：
js
代码解读
复制代码var btn = document.getElementById('btn');btn.addEventListener('click', function() { jsonp({ url: 'http://localhost:3001/getUserInfo', data: { name: '浩浩' }, success: function(data) { alert('UserInfo:' + JSON.stringify(data)); } })});JSONP 优缺点
简单兼容性好，可用于解决主流浏览器的跨域数据访问的问题
仅支持get方法具有局限性,不安全可能会遭受 XSS 攻击
#方法二：CORS
CORS 是一个 W3C 标准，全称是"跨域资源共享"（Cross-origin resource sharing）。 CORS 需要浏览器和服务器同时支持。但是目前基本上浏览器都支持，所以我们只要保证服务器端服务器实现了 CORS 接口，就可以跨源通信。
后端解决跨域问题，就是在服务器端给响应添加头信息
| Name | Required | Comments |
|---|---|---|
| Access-Control-Allow-Origin | 必填 | 允许请求的域 |
| Access-Control-Allow-Methods | 必填 | 允许请求的方法 |
| Access-Control-Allow-Headers | 可选 | 预检请求后，告知发送请求需要有的头部 |
| Access-Control-Allow-Credentials | 可选 | 表示是否允许发送cookie，默认false； |
| Access-Control-Max-Age | 可选 | 本次预检的有效期，单位：秒； |
在 node 上处理
js
代码解读
复制代码// 方式一const Koa = require('koa')const app = new Koa()app.all("*", (req, res, next) => { res.header("Access-Control-Allow-Origin", "*"); res.header("Access-Control-Allow-Headers", "content-type"); // 关键点 next()})js
代码解读
复制代码// 方式二const Koa = require('koa')const app = new Koa()app.all("*", (req, res, next) => { // 设置域名跨域 res.header("Access-Control-Allow-Origin", "http://127.0.0.1"); // 跨域允许的请求方式 res.header("Access-Control-Allow-Headers", "DELETE,PUT,POST,GET,OPTIONS"); // 关键点 next()})在 Nginx 上处理
js
代码解读
复制代码location /example { add_header Access-Control-Allow-Origin *; add_header Access-Control-Allow-Methods *; # add_header Access-Control-Allow-Methods GET,POST,OPTIONS;}
