解决跨域--jsonp、nginx、cors三种方式

我会带着你远行 2022-05-20 09:27 237阅读 0赞

from：[http://blog.abreaking.com/c/jjkyjncszfs][http_blog.abreaking.com_c_jjkyjncszfs]

**一、什么是跨域**

如果存在协议、域名、端口或者子域名不同服务端，都会算作跨域。一般来讲，浏览器为了安全的问题都是限制了跨域的访问，因而，有时候就需要想方法绕过浏览器的同源策略了。

**二、使用jsonp解决的跨域问题**

根据jquery的文档：jsonp是json的一种扩展，它要求服务端的代码来检测并处理查询字符串参数。如果指定了script或者jsonpl类型，那么当服务器接收到数据时，实际上就是用了<script>标签而不是XHR(xmlHttpRequest)对象，在这种情况下，$.ajax()不再返回一个XHR对象，并且也不会 传递事件处理函数。。      
    可以看到，非跨域请求的url直接就是你请求的的url，请求成功返回json数据。。  
    跨域请求的url格式为：url？callback=?    这里的callback为你的回掉函数名，cxf默认使用“\_jsonp”，后面跟着的可以看作是一个标志串吧    ，而后服务器返回的格式：该回掉函数名（json数据）。。。拿到返回的数据后，jQuery 将自动替换 ? 为正确的函数名，以执行回调函数。需要注意的是，jQuery中需要指定参数dataType:"jsonp"， jsonp:"\_jsonp"。  
    值得一提是：Jsonp是一种比较古老的方式，而且有很大的局限性：只能是get请求，不能发送post请求，也就是说只能去获取数据，而不能发送数据到服务器。所以，不怎么建议使用这种方式。

**三、使用Nginx反向代理实现跨域请求**

借鉴：[https://www.cnblogs.com/tianheila/p/6139241.html][https_www.cnblogs.com_tianheila_p_6139241.html]  
    先补充一下我之前的那个问题，其实很简单，在[http://127.0.0.1:80][http_127.0.0.1_80]端，我通过ajax请求访问[http://127.0.0.1:7777][http_127.0.0.1_7777]下的服务。即两个端口不一致，故为跨域请求。80端请求的[http://127.0.0.1:7777/manager/ws/poem/get/all][http_127.0.0.1_7777_manager_ws_poem_get_all]。。  
    具体思路是：nginx监听8080端口。。80端不再直接对资源服务器发起请求了，而是改为直接访问Nginx服务器。其实在这里最初我也是挺疑惑的：难道80端对ngnix发起的访问效果不是和直接访问7777端效果一样吗？ 后来我才明白使用ngnix，这时访问该页面就不在是[http://127.0.0.1:80/poem][http_127.0.0.1_80]了，而是直接是：[http://127.0.0.1:8080/poem][http_127.0.0.1_8080_poem]了。。  
   在nginx里需要作一些配置：（下划线就是需要新增配置的）

<table> 
 <tbody> 
  <tr> 
   <td> <p>location ^~/cross_origin/ { <br> &nbsp;<u>&nbsp;rewrite&nbsp; ^/cross_origin/(.*)$ /$1 break;</u><br> &nbsp;&nbsp;proxy_pass&nbsp;<a href="http://127.0.0.1:7777/" rel="nofollow">http://127.0.0.1:7777/</a>;<br> &nbsp; }</p> <p>&nbsp; location / { <br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; root&nbsp;&nbsp; html;<br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;proxy_pass&nbsp;&nbsp;<a href="http://127.0.0.1/" rel="nofollow">http://127.0.0.1:80</a>;<br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;index&nbsp; index.html index.htm;<br> &nbsp;&nbsp;&nbsp; }</p> </td> 
  </tr> 
 </tbody> 
</table>

（说明下：/cross\_origin/是我待会要在原url中新增的（纯表示标识），上面表示将/cross\_origin/ xxxx/xxx的url截取为xxx/xxx，其实这一步并非必要，只是纯个人注意所用）  
    在原来的80端的ajax的url中修改为：/cross\_origin/manager/ws/poem/get/all。。再到浏览器访问，就OK了。。  
其实这种方式就是利用服务器之间的资源请求是不会有跨域限制了。。ngnix就是将两个，不管是consumer还是provider，一律看作provider，从而实现跨域请求吧。

**四、使用cors解决跨域**

关于cors，建议参考：**[http://www.ruanyifeng.com/blog/2016/04/cors.html][http_www.ruanyifeng.com_blog_2016_04_cors.html]**

**CORS**：cross origin resource sharingà跨域资源共享。它是一种W3C的标准，允许浏览器向跨院服务器发出XMLHttpRequest请求，从而能客服ajax同源的限制。此外，IE10以上的浏览器方能支持。。

浏览器将cors请求分为两类：简单请求、非简单请求。

同时满足以下两大条件，就属于简单请求：

<table> 
 <tbody> 
  <tr> 
   <td> <p>条件一：请求方式不超过以下三种方法之一：</p> <p>l&nbsp;&nbsp;HEAD</p> <p>l&nbsp;&nbsp;POST</p> <p>l&nbsp;&nbsp;GET</p> <p>条件二：HTTP头信息不超出以下几种字段：</p> <p>l&nbsp;&nbsp;Accept</p> <p>l&nbsp;&nbsp;Accept-Language</p> <p>l&nbsp;&nbsp;Content-Language</p> <p>l&nbsp;&nbsp;Last-Event-ID</p> <p>l&nbsp;&nbsp;Content-Type：只限于三个值application/x-www-form-urlencoded、multipart/form-data、text/plain</p> </td> 
  </tr> 
 </tbody> 
</table>

反之就为非简单请求。（具体可参考我给出的链接）

对于ajax请求，因为ajax本身就是本身就是伴随着跨域的，跨服务器请求数据，那么就得需要服务器的同意。为此，在服务器端，需要设置：

<table> 
 <tbody> 
  <tr> 
   <td> <p>response.setHeader("Access-Control-Allow-Origin", "<a href="http://127.0.0.1:8080/" rel="nofollow">http://127.0.0.1:8080"</a>;);</p> </td> 
  </tr> 
 </tbody> 
</table>

(注意：后面只能是你的域名，而不是url路径，域名可以是为\*，代表接受所有的域请求)

此外，还有几个可选字段：

**         Access-Control-Allow-Credentials**：表示是否发送cookie，默认情况下，cookie是不包含在CORS中的。若要发送cookie到服务器端，一方面需要服务器端同意：

<table> 
 <tbody> 
  <tr> 
   <td> <p>response.setHeader("Access-Control-Allow-Credentials", "true");</p> </td> 
  </tr> 
 </tbody> 
</table>

另一方面需要客户端同意：

<table> 
 <tbody> 
  <tr> 
   <td> <p>（JQuery的ajax）</p> <p>xhrFields:{ </p> <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;withCredentials:true&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//可以发送cookie</p> <p>},</p> <p>(纯生态ajax，以后如是)</p> <p>var xhr = new XMLHttpRequest();</p> <p>xhr.withCredentials = true;</p> </td> 
  </tr> 
 </tbody> 
</table>

**         Access-Control-Expose-Headers****：**表示允许在相应头里面暴露什么头信息。如：在服务器端设置：

<table> 
 <tbody> 
  <tr> 
   <td> <p>response.setHeader("foo", "abcd");</p> <p>response.setHeader("Access-Control-Expose-Headers", "foo ");</p> </td> 
  </tr> 
 </tbody> 
</table>

（表示允许暴露请求头foo）

可以在客户端通过XMLHttpRequest.getResponseHeader()方法获取：

<table> 
 <tbody> 
  <tr> 
   <td> <p>XMLHttpRequest.getResponseHeader("foo")</p> </td> 
  </tr> 
 </tbody> 
</table>

**         Access-Control-Allow-Headers****：**表示请求头信息。。

**请注意：**之前说过简单请求头信息不超过那五种字段，是为简单请求，故一般我们的请求都是简单请求。如果在**Access-Control-Allow-Headers**设置自己的信息，如在ajax里：

<table> 
 <tbody> 
  <tr> 
   <td> <p>headers:{"abc":"value"}, //这样总是不行</p> <p>或者：</p> <p><strong>XMLHttpRequest.setRequestHeader(“abc”,”value”)</strong></p> </td> 
  </tr> 
 </tbody> 
</table>

明显“abc”是不在之前说的那几种类型的，故是为非简单请求。

对于非简单请求，浏览器 会进行两次请求，（你可以直接通过debug浏览器看到，这也是区分简单请求和非简单请求的一种方式）

第一次请求：

你会发现方法为options，这也叫做浏览器的预请求。。服务器收到"预检"请求以后，检查了Origin、Access-Control-Request-Method和Access-Control-Request-Headers字段以后，确认允许跨源请求，就可以做出回应，如下：

怎么作出如上的回应呢？我是用的java的servlet接收，你必须要写个filter（只能是filter、filter、filter，重要事情说三遍！！！直接在你的Servlet里是没用的），如下：

<table> 
 <tbody> 
  <tr> 
   <td> <p>public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain) throws IOException, ServletException { </p> <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// TODO Auto-generated method stub</p> <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// place your code here</p> <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;HttpServletResponse response1 = (HttpServletResponse) response;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</p> <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;response1.setHeader("Access-Control-Allow-Methods", "get,post,options");</p> <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;response1.setHeader("Access-Control-Allow-Origin", "<a href="http://127.0.0.1:8080/" rel="nofollow">http://127.0.0.1:8080"</a>;);&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</p> <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;response1.setHeader("Access-Control-Allow-Headers", "abc");</p> <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// pass the request along the filter chain</p> <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;chain.doFilter(request, response);</p> <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}</p> </td> 
  </tr> 
 </tbody> 
</table>

Tips:否则你会发现会报如下错误：

<table> 
 <tbody> 
  <tr> 
   <td> <p>Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin'</p> </td> 
  </tr> 
 </tbody> 
</table>

第二次请求：预检通过后就是正常的Post发送请求了。。

**         Access-Control-Allow-Methods****：**表示允许的方法，如果客户端不是get、post、head三种的一种，则是非简单请求了，浏览器又会预检了，解决方式与上面的如出一辙。

[http_blog.abreaking.com_c_jjkyjncszfs]: http://blog.abreaking.com/c/jjkyjncszfs
[https_www.cnblogs.com_tianheila_p_6139241.html]: https://www.cnblogs.com/tianheila/p/6139241.html
[http_127.0.0.1_80]: http://127.0.0.1/
[http_127.0.0.1_7777]: http://127.0.0.1:7777/
[http_127.0.0.1_7777_manager_ws_poem_get_all]: http://eip.teamshub.com/edittopic/%3Ca%20%20data-cke-saved-href='http:/127.0.0.1:7777/manager/ws/poem/get/all'%20href='http:/127.0.0.1:7777/manager/ws/poem/get/all'%20rel=
[http_127.0.0.1_8080_poem]: http://127.0.0.1:8080/poem
[http_www.ruanyifeng.com_blog_2016_04_cors.html]: http://www.ruanyifeng.com/blog/2016/04/cors.html