跨域问题的解决

最近工作中，由于后端使用的新框架层面目前不支持jsonp，加上需要contentType为json格式，遇到了几个之前没遇到的问题，今天进行一下总结。

跨域基本概念知识

关于跨域：跨域资源共享(CORS) 是一种机制，它使用额外的 HTTP 头来告诉浏览器 让运行在一个 origin (domain) 上的Web应用被准许访问来自不同源服务器上的指定的资源。当一个资源从与该资源本身所在的服务器不同的域、协议或端口请求一个资源时，资源会发起一个跨域 HTTP 请求。跨域资源共享（ CORS ）机制允许 Web 应用服务器进行跨域访问控制，从而使跨域数据传输得以安全进行。现代浏览器支持在 API 容器中（例如 XMLHttpRequest 或 Fetch ）使用 CORS，以降低跨域 HTTP 请求所带来的风险。——摘录自MDN

项目开发中的跨域问题解决

1、使用jsonp
对于支持jsonp格式的后端接口，前端增加一个名为callback的入参，此时接口返回为js文件。js,img，iframe标签具有src属性，不跨域限制。允许前端入名为callback的参数，服务端使用该入参作为函数名包裹json数据返回给前端。

2、nginx上addHeader
从1中可以看出，jsonp几乎不受任何限制了，但是个别情况下由于服务端的一些限制，还是需要再nginx上进行配置，允许跨域，需要添加的头为：
Access-Control-Allow-Origin：https://xxx.xxx.xxx // 需要允许跨域的请求
Access-Control-Allow-Credentials： true // 允许对请求的相应暴露给页面
Access-Control-Allow-Methods： POST,GET,OPTIONS // 允许的请求方法