1.使用Jsonp解決跨域(不推薦寡夹,因?yàn)橹恢С謌et請(qǐng)求,不支持post請(qǐng)求)
1.前端AJAX請(qǐng)求dataType改為jsonp魂角,且增加jsonp:"jsonpCallback"
$.ajax({
type:"GET",
async:"false",
url:"127.0.0.1:80/xxxx",
dataType:"jsonp",
jsonp:"jsonpCallback",//服務(wù)端用于接收callback調(diào)用的function名的參數(shù)
success:function(data){
alert("data");
},
erro:function(){
alert("erro");
}
})
2.請(qǐng)求的URL后面會(huì)增加一個(gè)jsonpCallback=xxx的隨機(jī)數(shù)智绸,服務(wù)端返回值時(shí)瞧栗,需要把jsonpCallBack的隨機(jī)數(shù)一起返回
3.type改為ipost請(qǐng)求時(shí),但是實(shí)際請(qǐng)求依舊是get
2.使用HttpClient進(jìn)行轉(zhuǎn)發(fā)(不推薦挣惰,因?yàn)樾实团贡撸瑫?huì)發(fā)送兩次請(qǐng)求)
1.A項(xiàng)目需要調(diào)用B項(xiàng)目的接口是,A項(xiàng)目前端ajax調(diào)用后端URL竖幔,如192.168.1.1:8080/forwardB
2.在forwardB中是偷,使用HttpClient調(diào)用192.168.1.1:8081/xxxx
相當(dāng)于發(fā)送兩次請(qǐng)求,但是注意保證域名和端口號(hào)一致問(wèn)題
好處:安全饿幅,隱蔽了真實(shí)的接口調(diào)用
3.設(shè)置響應(yīng)頭允許跨域(推薦,適合小公司解決跨域問(wèn)題)
1.通過(guò)fileter過(guò)濾器中寫(xiě)入ACCESS-Control-Allow的頭信息透乾,進(jìn)行跨域訪問(wèn),代碼如下:
public class CrossDomainFilter implements Filter{
@Override
public void destroy() {
// TODO Auto-generated method stub
}
@Override
public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException {
//設(shè)置跨域請(qǐng)求
HttpServletResponse response = (HttpServletResponse) res;
//此處ip地址為需要訪問(wèn)服務(wù)器的ip及端口號(hào)
response.setHeader("Access-Control-Allow-Origin", "http://192.168.1.1:8080");
response.setHeader("Access-Control-Allow-Credentials", "true");
response.setHeader("Access-Control-Allow-Methods", "GET, HEAD, POST, PUT, DELETE, TRACE, OPTIONS, PATCH");
response.setHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type,Token,Accept, Connection, User-Agent, Cookie");
response.setHeader("Access-Control-Max-Age", "3628800");
System.out.println("設(shè)置跨域請(qǐng)求");
chain.doFilter(req, response);
}
@Override
public void init(FilterConfig filterConfig) throws ServletException {
// TODO Auto-generated method stub
}
}
<!--"Access-Control-Allow-Origin"表示的是訪問(wèn)服務(wù)端的ip地址及端口號(hào)磕秤,也可以設(shè)置為*表示所有域都可以通過(guò)乳乌;
"Access-Control-Allow-Credentials"表示的是跨域的ajax中可以攜帶cookie,此時(shí)第一項(xiàng)設(shè)置不能為*市咆,需指定域名汉操;
"Access-Control-Allow-Methods"表示的是允許跨域的請(qǐng)求方法;
"Access-Control-Allow-Headers"表示的是允許跨域請(qǐng)求包含content-type頭蒙兰;
"Access-Control-Allow-Max-Age"表示的是在3628800秒內(nèi)磷瘤,不需要再發(fā)送預(yù)檢驗(yàn)請(qǐng)求,可以緩存該結(jié)果搜变,一般默認(rèn)采缚。-->
2.web.xml配置filter
<!-- 跨域設(shè)置 -->
<filter>
<filter-name>crossFilter</filter-name>
<filter-class>com.chinamobile.bcop.console.security.filter.CrossDomainFilter</filter-class>
</filter>
<filter-mapping>
<filter-name>crossFilter</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>
4.適應(yīng)Nginx搭建API網(wǎng)關(guān)接口(強(qiáng)烈推薦,因?yàn)楸WC域名和端口一致挠他,以項(xiàng)目區(qū)分方向代理到真實(shí)的服務(wù)器地址)
1.原理:保證域名和端口都是相同的,根據(jù)項(xiàng)目不同名稱(chēng)使用nginx進(jìn)行轉(zhuǎn)發(fā)到真實(shí)的服務(wù)器地址
2.注意殖侵,保證域名和端口都是相同的贸呢,只是項(xiàng)目不同
3.這種方案是可以徹底解決網(wǎng)站的跨域問(wèn)題的,而且可以保證整套系統(tǒng)的安全性問(wèn)題
如客戶端請(qǐng)求api.xxxx.com/a,nginx根據(jù)/a拢军,轉(zhuǎn)發(fā)到項(xiàng)目a(192.168.1.1:8080),
客戶端請(qǐng)求api.xxxx.com/b贮尉,nginx根據(jù)/b,轉(zhuǎn)發(fā)到項(xiàng)目b(192.168.1.1:8081)
5.使用Zuul微服務(wù)搭建API網(wǎng)關(guān)(強(qiáng)烈推薦朴沿,Spring Cloud)