?

一、什么是跨域，跨哪些域

　　協(xié)議（http、https）? ?域名（ip）? ?端口號(hào)（80、8080）

?

二、前后端分離為什么要跨域

　　如果前后端沒分離那么都在同一個(gè)服務(wù)器中，請(qǐng)求協(xié)議、域名以及端口一致自然不存在跨域問題

　　前后臺(tái)分離之后前后臺(tái)有可能分開部署，也有可能使用不同端口，會(huì)存在跨域問題

?

三、跨域?qū)嶋H上是瀏覽器級(jí)別的限制

　　我們?cè)诎l(fā)出請(qǐng)求以及獲取響應(yīng)的時(shí)候?qū)嶋H上是成功了，但是由于瀏覽器做了攔截處理，所以無法獲取數(shù)據(jù)

?

?

四、跨域知道的有三種?? ?? ??

1、jsonp? ? 只能適用get請(qǐng)求

??? $.ajax({

??????????????? ?????url: "http://localhost:8080/aaaaa",

???????????????????? type: "GET",

???????????????????? dataType: "jsonp", //指定服務(wù)器返回的數(shù)據(jù)類型

???????????????????? success: function (data) {

???????????????????????? alert(“success”);

???????????????????? }

???????????????? })

2、添加<meta http-equiv="Access-Control-Allow-Origin" content="*" />? ? 只能適用同一個(gè)域

?

?

3、cors（Cross-origin resource sharing），，，從服務(wù)端設(shè)置跨域信息?? ??? ?? ? 可以支持get、post、head、delete請(qǐng)求類型

　　注意在發(fā)起delete請(qǐng)求的時(shí)候會(huì)先詢問服務(wù)器是否支持delete請(qǐng)求，如果不支持的話會(huì)發(fā)送options請(qǐng)求，也叫做Preflight請(qǐng)求。

　　添加服務(wù)器支持delete請(qǐng)求：add_header 'Access-Control-Allow-Methods' 'DELETE';

?

　　

需要設(shè)置：

???　　 Access-Control-Allow-Origin（必含） – 允許的域名，只能填通配符或者單域名

　　　Access-Control-Allow-Methods（必含） – 這允許跨域請(qǐng)求的http方法（常見有POST、GET、OPTIONS）

?　　? Access-Control-Allow-Headers（當(dāng)預(yù)請(qǐng)求中包含Access-Control-Request-Headers時(shí)必須包含） – 這是對(duì)預(yù)請(qǐng)求當(dāng)中Access-Control-Request-Headers的回復(fù)，和上面一樣是以逗號(hào)分隔的列表，可以返回所有支持的頭部。

? ? ? ? ? Access-Control-Allow-Credentials（可選） – 該項(xiàng)標(biāo)志著請(qǐng)求當(dāng)中是否包含cookies信息，只有一個(gè)可選值：true（必為小寫）。如果不包含cookies，請(qǐng)略去該項(xiàng)，而不是填寫false。這一項(xiàng)與XmlHttpRequest2對(duì)象當(dāng)中的withCredentials屬性應(yīng)保持一致，即withCredentials為true時(shí)該項(xiàng)也為true；withCredentials為false時(shí)，省略該項(xiàng)不寫。反之則導(dǎo)致請(qǐng)求失敗。

? ? ? ? ??Access-Control-Max-Age（可選） – 以秒為單位的緩存時(shí)間。預(yù)請(qǐng)求的的發(fā)送并非免費(fèi)午餐，允許時(shí)應(yīng)當(dāng)盡可能緩存。

簡(jiǎn)潔版工具類，并不適合生產(chǎn)環(huán)境

import java.io.IOException;import javax.servlet.FilterChain; import javax.servlet.ServletException; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse;import org.springframework.web.filter.OncePerRequestFilter;/*** 無需配置，跨所有域，可用于測(cè)試，生產(chǎn)環(huán)境建議使用校驗(yàn)完整的過濾器*/ public class CORSFilterEasy extends OncePerRequestFilter{protected void doFilterInternal(HttpServletRequest request, HttpServletResponse response, FilterChain filterChain) throws ServletException, IOException {response.addHeader("Access-Control-Allow-Origin", "*");if(request.getHeader("Access-Control-Request-Method") != null && "OPTIONS".equals(request.getMethod())) {response.addHeader("Access-Control-Allow-Methods", "HEAD,GET,POST,PUT,DELETE,OPTIONS");response.addHeader("Access-Control-Allow-Headers", "Content-Type,Origin,Accept");response.addHeader("Access-Control-Max-Age", "120");}filterChain.doFilter(request, response);} }

?

??

配置web.xml

　　 <!-- 請(qǐng)求源過濾 --><filter><filter-name>cors</filter-name><filter-class>common.filter.CORSFilterEasy</filter-class> </filter> <filter-mapping><filter-name>cors</filter-name><url-pattern>/*</url-pattern></filter-mapping>

?

補(bǔ)充：以上配置前兩種有局限行，第三種比較麻煩，發(fā)現(xiàn)spring4.*里面已經(jīng)有cors的配置

<mvc:cors><mvc:mapping path="/**" /> </mvc:cors>沒錯(cuò)，這樣就可以了。不需要配置過濾器，不過注意springmvcjar包的版本要4.*

總結(jié)

以上是生活随笔為你收集整理的跨域三种方式的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。