Angularjs 跨域請求
最近在做個專案,啟用了Angularjs作為前端框架,後端則使用java服務端,引入了shiro框架作為許可權管理。 理想是豐滿的,現實是骨感的。 起先單域測試下一切Ok,進行二級域名跨域測試就出現問題了。
遇到坑以及填坑
1.Access-Control-Allow-Origin,Access-Control-Allow-Headers,Access-Control-Allow-Methods 跨域請求的時候遇到了Access-Control-Allow-Origin問題,起先在Filter中是這麼解決的,程式碼如下:
response.addHeader("Access-Control-Allow-Origin","*"); response.addHeader("Access-Control-Allow-Headers", "accept, content-type"); response.addHeader("Access-Control-Allow-Methods", "DELETE, GET, HEAD, OPTIONS, PATCH, POST, PUT");
但是考慮到Origin全開放有點不好吧,然後我也多想,就直接在Filter中寫了一個Origin的校驗,程式碼如下:
private String getDomain(String host) {
if (host.endsWith(domain)) {
return SecondDomainKit.contains(host.substring(0, host.length() - (domain.length() + 1)));
} else return null;
}
response的Header設定修改為:
2.session不共享 在shiro.ini中配置為使用Cookies進行Session管理,配置如下:/ 校驗資料來源,成功後進行跨域授權 String origin = request.getHeader("Origin"); if (StrKit.notBlank(origin)) { Pattern pattern = Pattern.compile("([a-zA-z]+://){0,1}([^\\s]*)"); Matcher matcher = pattern.matcher(origin); if (matcher.find()) { String host = matcher.group(2); if (host.endsWith(domain) && !host.equals(domain) && StrKit.notBlank(getDomain(host))) { response.addHeader("Access-Control-Allow-Origin", request.getScheme() + "://" + getDomain(host) + "." + domain); response.addHeader("Access-Control-Allow-Headers", "accept, content-type"); response.addHeader("Access-Control-Allow-Methods", "DELETE, GET, HEAD, OPTIONS, PATCH, POST, PUT"); } } }
3.POST請求中session會重新整理,導致登陸成功之後,Shiro任然取不到身份資訊,這個也困擾了我好久。直接給出修改程式碼,在js中修改如下:sessionIdCookie = org.apache.shiro.web.servlet.SimpleCookie sessionIdCookie.name = JMSESSIONID #可修改Cookie的名稱 sessionIdCookie.domain = xxxx.com #這裡填入頂級域名 sessionIdCookie.maxAge = 604800 ... sessionManager = org.apache.shiro.web.session.mgt.DefaultWebSessionManager sessionManager.sessionIdCookie = $sessionIdCookie sessionManager.sessionIdCookieEnabled = true ...
app.config(['$httpProvider', function($httpProvider) {
$httpProvider.defaults.withCredentials = true;
}]);
將Filter中response的Header修改下,程式碼如下:
// 校驗資料來源,成功後進行跨域授權
String origin = request.getHeader("Origin");
if (StrKit.notBlank(origin)) {
Pattern pattern = Pattern.compile("([a-zA-z]+://){0,1}([^\\s]*)");
Matcher matcher = pattern.matcher(origin);
if (matcher.find()) {
String host = matcher.group(2);
if (host.endsWith(domain) && !host.equals(domain) && StrKit.notBlank(getDomain(host))) {
response.addHeader("Access-Control-Allow-Origin",
request.getScheme() + "://" + getDomain(host) + "." + domain);
response.addHeader("Access-Control-Allow-Headers", "accept, content-type");
response.addHeader("Access-Control-Allow-Methods", "DELETE, GET, HEAD, OPTIONS, PATCH, POST, PUT");
// 是否支援cookie跨域
response.addHeader("Access-Control-Allow-Credentials", "true");
}
}
}
相關推薦
Angularjs 跨域請求
最近在做個專案,啟用了Angularjs作為前端框架,後端則使用java服務端,引入了shiro框架作為許可權管理。 理想是豐滿的,現實是骨感的。 起先單域測試下一切Ok,進行二級域名跨域測試就出現問題了。 遇到坑以及填坑 1.Access-Control-Allow-
angularjs跨域請求,html5封裝進android與ios
前言 第一次正兒八經的寫部落格實在有點不知道怎麼開頭好,所學的東西也不夠系統,我相信我寫的東西瞄準了一個點去寫,無論從哪裡開始,都會讓人覺得有點突然,但是,我也沒辦法從所談主題的起源開始談,所以不糾結這個次序關係了,有關主題的前後我就稍微介紹一些,主要圍
AngularJS 用 $http.jsonp 方法跨域請求資料錯誤的問題
angular.module('myApp',[]).controller('test11', function test11($scope,$http) { $http.jsonp("https://api.github.com/repos/cs1707/blog
angularJS實現跨域請求
一直都用Jsonp的方式來解決angularjs跨域問題,查詢讀取資訊還可以。如果是遇到比如登陸,需要post使用者資訊的,這個時候必須要用到post方式。 service端配置,post資料的介面處加上下面程式碼: header('Access-Contr
解決angularjs使用iframe載入網址的跨域請求
<iframe ng-src="{{url}}" width="100%" height="100%" seamless frameborder="0" ></iframe> 開啟不同域的內容時報下面的錯誤:Blocked loading res
angularjs實現查詢天氣的小案例(跨域請求)
<!DOCTYPE html> <html lang="en" ng-app="App"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="
Spring mvc 跨域請求
extend ava ping mapping header true delete with ade 創建類 package Le.log; import java.io.IOException; import javax.servlet.FilterChain;im
WebApi跨域請求
data 配置文件 color bapi .get cti 文件中 cte version 在實際開發中 會有提供webapi給前端js 直接調用的情況, 這時候就會有存在跨域的情況, 解決方案: 在Global中添加代碼 protected void Appl
AJAX 跨域請求 - JSONP獲取JSON數據
tel -name 跨域訪問 服務器 utf pen domain nbsp XML 1、什麽是JSONP? JSONP(JSON with Padding)是一個非官方的協議,它允許在服務器端集成Script tags返回至客戶端,通過javascript callb
vue proxyTable 接口跨域請求調試(五)
cau tsp {} war 遠程服務 調試 設置代理 row web 在不同域之間訪問是比較常見,在本地調試訪問遠程服務器。。。。這就是有域問題。 VUE解決通過proxyTable: 在 config/index.js 配置文件中 dev: { env:
利用jsonp實現跨域請求
get p地址 doc ajax請求 -s tar 原理 安全策略 都是 同源策略,它是由Netscape提出的一個著名的安全策略。現在所有支持JavaScript 的瀏覽器都會使用這個策略。所謂同源是指,域名,協議,端口相同。當一個瀏覽器的兩個tab頁中分別打開來 百
跨域請求
object php 格式 網頁 bsp type console main origin 一、jsonp JSON(JavaScript Object Notation)和JSONP(JSON with Padding):將json格式數據以function包裹起來,通過
AJAX跨域請求數據
一個 回來 函數 請求 我們 才會 但是 註意點 攔截 由於瀏覽器的同源策略 ajax請求不可以接收到請求響應回來的數據 請求數據需要調用瀏覽器的內置構造函數 XMLHttpRequest() 進行 實例對象 var xhr = new XMLHttpRequ
跨域請求資源的幾種方式
get 合同 是否 超時 表單提交 沒有 容易 系列 htm 跨域請求資源的幾種方式 由於瀏覽器同源策略,凡是發送請求URL的協議、域名、端口三者之間任意一與當前頁面地址不同即為跨域。 (1)JSONP(jsonp跨域get請求) 這種方式主要是通過動態創建一個
Ajax跨域請求COOKIE無法帶上的解決辦法
tar function jquery question logs request cross xmlhttp quest 本文參考https://stackoverflow.com/questions/12840410/how-to-get-a-cookie-from-a
CORS——跨域請求那些事兒
lob 有效期 site cati 項目 light 另一個 send 決定 在日常的項目開發時會不可避免的需要進行跨域操作,而在實際進行跨域請求時,經常會遇到類似 No ‘Access-Control-Allow-Origin‘ header is present on
Vue中使用jsonp進行跨域請求
集成 ret return axios 微信公眾 接口 erro jsonp export Vue-resouse中可以通過this.$http.jsonp的方式直接使用jsonp進行跨域請求。官方在推薦使用axios之後,axios並沒有集成jsonp。但在axios的g
ajax獲取json數據及實現跨域請求
cgi size 域名 3.2 方便 nap 不清楚 anti dex 最近想練習一下ajax獲取json數據 , 首先上網找一些在線的可用來測試的接口. -----------------------------------------------------這裏是接口分
跨域請求httpclient
t對象 pair etl actor sock slf4j .cn factor odi httpclient:是Apache工具包,util,它可以作為一個爬蟲,直接爬取某個互聯網上的頁面。獲取到時頁面最終的源文件html。直接可以獲取頁面返回json。就可以直接在代碼內
【原】fetch跨域請求附帶cookie(credentials)
allow src ssi ann oct o-c ech .com 頭部 HTTP訪問控制 https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Access_control_CORS 解決跨域的方式有很多種,本文介紹“跨域請