1. 程式人生 > >Angularjs 跨域請求

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設定修改為:
/ 校驗資料來源,成功後進行跨域授權
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");
         }
     }
}
2.session不共享 在shiro.ini中配置為使用Cookies進行Session管理,配置如下:
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
...
3.POST請求中session會重新整理,導致登陸成功之後,Shiro任然取不到身份資訊,這個也困擾了我好久。直接給出修改程式碼,在js中修改如下:
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 解決跨域的方式有很多種,本文介紹“跨域請