當前位置：首頁 > 前端技术 > javascript >内容正文

javascript

AngularJS跨域问题 ajax 跨域

發布時間：2025/7/14 javascript 22 豆豆

生活随笔收集整理的這篇文章主要介紹了 AngularJS跨域问题 ajax 跨域小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

為什么80%的碼農都做不了架構師？>>> ??

先看代碼：

$http({method: 'POST',//withCredentials: true, //這個用來將cookie傳回服務器，但是post請求設置這個將導致errorheaders: {'Content-Type': 'application/x-www-form-urlencoded',//跨站必須，否則瀏覽器自動將method改為options },url: 'http://192.168.14.136:8888/api/v1.0/login/',data: data1,/*transformRequest: function(obj) {//這個用來把json變為p1=v1&p2=v2這種形式var str = [];for (var p in obj) {str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p]));}return str.join("&");}*/}).success(function(data) {alert(data);}).error(function(data) {alert(data);});//服務器端必須返回頭如下才會success response.setHeader("Access-Control-Allow-Origin", "*");//如果要傳遞cookie這里不能使用通配符，而是要用下面的方式 response.addHeader("Access-Control-Allow-Credentials", "true"); //接受cookie傳遞 response.setHeader("Access-Control-Allow-Origin", request.getHeader("Origin")); //匹配客戶端發來的Origin并返回去，這樣ajax才能success。 response.setHeader("Access-Control-Allow-Methods","POST"); response.setHeader("Access-Control-Allow-Headers","x-requested-with,content-type");python：self.set_header("Content-Type","application/json")self.set_header("Access-Control-Allow-Origin",self.request.headers.get("Origin", "*"))self.set_header("Access-Control-Allow-Credentials","true")self.set_header("Access-Control-Allow-Methods","POST,GET,OPTIONS")self.set_header("Access-Control-Allow-Headers","x-requested-with,content-type")注意：返回json的格式必須嚴謹，否則會ajax err

?

一：案例實現

從網上下載了一個AngularJS項目，配置啟動后發現數據發送不到自己的后臺中去，總是提示跨域問題。

下面是AngularJS的部分代碼：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html ng-app=""> <head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><meta http-equiv="Access-Control-Allow-Origin" content="*"><title>AngularJSTest</title> </head> <body ng-controller="MyController"> <p>User</p> <p>ID</p> <input id="id" name="id" ng-model="saveUser.id"> <br> <p>Name</p> <input id="id" name="name" ng-model="saveUser.name"> <br> <p>age</p> <input id="id" name="age" ng-model="saveUser.age"> <br> <ul><li ng-repeat="x in infos">{{ x.ID + x.name + x.age }}</li> </ul> <button ng-click="getUser()">提交</button> <script>function MyController($scope, $http){$scope.saveUser = {id:1,name:"John",age:"16"};$scope.getUser = function(){$http({method: "POST",url: "http://localhost:8080/Spring-MVC/AngularJS/getUser.do",data: $scope.saveUser}).success(function (data){$scope.infos = data;})};} </script> <script src="lib/angular/angular.js"></script> </body> </html>

注意：在$http中URL前部分為后臺項目的路徑。

后臺需要自己寫一個過濾器，并配置到web.xml中去

package com.jxq.util;import java.io.IOException;import javax.servlet.Filter; import javax.servlet.FilterChain; import javax.servlet.FilterConfig; import javax.servlet.ServletException; import javax.servlet.ServletRequest; import javax.servlet.ServletResponse; import javax.servlet.http.HttpServletResponse;public class RequestFilter implements Filter {public void init(FilterConfig filterConfig) throws ServletException {// TODO Auto-generated method stub}public void doFilter(ServletRequest request, ServletResponse pResponse, FilterChain chain)throws IOException, ServletException {// TODO Auto-generated method stubHttpServletResponse response = (HttpServletResponse) pResponse;response.setHeader("Access-Control-Allow-Origin", "*");response.setHeader("Access-Control-Allow-Methods", "POST,GET,DELETE,PUT");response.setHeader("Access-Control-Allow-Headers", "x-requested-with,content-type");chain.doFilter(request, response);}public void destroy() {// TODO Auto-generated method stub}}

web.xml中的配置

<filter><filter-name>requestFilter</filter-name><filter-class>com.jxq.util.RequestFilter</filter-class></filter><filter-mapping><filter-name>requestFilter</filter-name><url-pattern>*.do</url-pattern></filter-mapping>

Controller的寫法：

package com.jxq.controller.user;import java.util.ArrayList; import java.util.List;import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.PathVariable; import org.springframework.web.bind.annotation.RequestBody; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RequestMethod; import org.springframework.web.bind.annotation.ResponseBody;import com.jxq.entity.user.AngularUser; import com.jxq.service.user.UserOperate;@Controller @RequestMapping(value="/AngularJS") public class UserController {@Autowiredprivate UserOperate userOperate;@RequestMapping(value="/getUser.do", method=RequestMethod.POST)@ResponseBodypublic List<AngularUser> save(@RequestBody AngularUser angularUser){System.out.println("ID:" + angularUser.getId());System.out.println("name:" + angularUser.getName());System.out.println("age:" + angularUser.getAge());List<AngularUser> lists = new ArrayList<AngularUser>();AngularUser user1 = new AngularUser();user1.setId("001");user1.setAge("25");user1.setName("zhangsan");lists.add(user1);AngularUser user2 = new AngularUser();user2.setId("002");user2.setAge("26");user2.setName("lisi");lists.add(user2);AngularUser user3 = new AngularUser();user3.setId("003");user3.setAge("27");user3.setName("wangwu");lists.add(user3);return lists;} }

必須要加上@responseBody，否則無法返回數據給前端，稍后的博客會詳細介紹@requestBody和@responseBody

二：跨域問題詳解

下面詳細說一下AngularJS的$http請求跨域，此部分為網上查詢得到。

跨域，前端開發會經常遇見，AngularJS實現跨域方式類似于Ajax,使用的是CORS機制。

1:CORS機制：

是一種允許當前域的資源被其他域的腳本請求訪問的機制。整個請求都是瀏覽器自動完成，不需要用戶參與，會自動添加一些附加的頭信息，有時候會多發出一次附加的請求。

分為兩種：簡單請求和非簡單請求。

區別在于只要滿足兩類條件，就是簡單請求。

（1）：請求方法是一下三種方法之一：HEAD、GET和POST

（2）：請求的頭信息不超過一下幾種字段：

Accept、Accept-Language、Content-Language、Last-Event-ID和Content-Type

其中Content-Type的值：application/x-www-form-urlencoded、multipart/form-data和text/plain

凡是不滿足上述兩個條件的，都是非簡單請求。瀏覽器對于這兩種請求的處理方式是不一樣的。

a：簡單請求

對于簡單請求，瀏覽器直接發出CORS請求，就是在頭信息中會增加一個Origin字段.

Origin字段用來說明本次請求來自哪個源(協議+域名+端口)，服務器根據這個值，決定是否同意這次請求。

如果是不在許可范圍內，服務器會返回一根正常的HTTP回應，但是沒有包括Access-Control-Allow-Origin字段，就知道是出錯了，從而跑出錯誤，被XMLHttpRequest的onerror回調函數捕獲。

注意：這種錯誤是無法通過狀態碼識別，因為HTTP回應可能是200。

如果Origin制定的域名在許可范圍內，服務器返回的響應，就會多幾個頭信息字段。

紅色框括起來的，是可CORS請求想看的字段，都是以Access-Control-開頭

（1）：Access-Control-Allow-Origin

該字段是必須的。它的值要么是請求時Origin字段的值，要么是一個*，表示接受任何域名的請求。

（2）：Access-Control-Allow-Credentials

可選，是一個布爾值，表示是否允許發送Cookie，默認情況下，Cookie不包括在CORS請求之中，設為true，即表示服務器明確許可，Cookie可以包含在請求中，一起發送給服務器。這個值也只能設為true。如果不需要瀏覽器發送Cookie給服務器，刪除即可。

（3）：Access-Control-Expose-Headers

可選，CORS請求時，XMLHttpRequest對象的getResponseHeader()方法只能拿到6個基本字段：Cache-Control、Content-Language、Content-Type、Expires、Last-Modified、Pragma。如果想拿到其他字段，就必須在Access-Control-Expose-Headers里面指定。上面的例子指定，getResponseHeader('FooBar')可以返回FooBar字段的值。

b：非簡單請求

是那種對服務器有特殊要求的請求，請求方法是PUT或DELETE，或者Content-Type類型為application/json

首先是預檢測：在正式通訊之前，發送一次查詢請求，詢問是否在許可名單中以及可以使用那些HTTP動詞和頭信息。只有得到答復，才會正式發起請求，否則報錯。

預檢測通過之后，瀏覽器就會發送一個正常的請求。

c：與JSONP的比較

JSONP只支持GET請求，CORS支持所有的類型的HTTP請求。JSONP的優勢在于支持老式瀏覽器，以及可以向不支持CORS的網站請求數據。

2：AngularJS的$http

AngularJS的$http請求方式：

$http.post(url, data, [config]).success(function(){ ... }); $http.get(url, [config]).success(function(){ ... });

（1）：JSONP方式：

指定callback和回調函數名，函數名為JSON_CALLBACK時，會調用success回調函數，JSON_CALLBACK必須全為大寫。

$http.jsonp("http://localhost/sitesettings/getBadgeInfo.pt?jsonp=JSON_CALLBACK&siteid=137bd406").success(function(data){ ... });

（2）：get方式

前端代碼：

function getAdustryController($scope,$http){$http.get('http://localhost/ajax/getAllIndustryCategoty.pt?languageColumn=name_eu').success(function(data){$scope.industries = data;}); }

（3）POST請求：

在服務端設置允許在其他域名下訪問、響應類型、響應頭

response.setHeader("Access-Control-Allow-Origin", "*");response.setHeader("Access-Control-Allow-Methods", "POST,GET,DELETE,PUT");response.setHeader("Access-Control-Allow-Headers", "x-requested-with,content-type");

在服務端設置：

轉載于:https://my.oschina.net/u/1777508/blog/1589159

《新程序員》：云原生和全面數字化實踐50位技術專家共同創作，文字、視頻、音頻交互閱讀

總結

以上是生活随笔為你收集整理的AngularJS跨域问题 ajax 跨域的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： Reveal 的初步用法
下一篇： EP39 全局静态Application