ajax跨域問題的解決方法

ajax跨域問題的解決方法？這個問題可能是我們日常學習或工作經常見到的。希望通過這個問題能讓你收獲頗深。下面是小編給大家帶來的參考內容，讓我們一起來看看吧！

ajax跨域問題的解決方法：1、響應頭添加Header允許訪問；2、jsonp只支持get請求不支持post請求；3、httpClient內部轉發；4、使用nginx搭建企業級接口網關方式。

ajax跨域問題的解決方法：

解決方式1：響應頭添加Header允許訪問

跨域資源共享（CORS）Cross-Origin Resource Sharing

這個跨域訪問的解決方案的安全基礎是基于"JavaScript無法控制該HTTP頭"

它需要通過目標域返回的HTTP頭來授權是否允許跨域訪問。

response.addHeader(‘Access-Control-Allow-Origin:*’);//允許所有來源訪問 
response.addHeader(‘Access-Control-Allow-Method:POST,GET’);//允許訪問的方式

解決方式2：jsonp 只支持get請求不支持post請求

用法：①dataType改為jsonp     ②jsonp : "jsonpCallback"————發送到后端實際為http://a.a.com/a/FromServlet?userName=644064&jsonpCallback=jQueryxxx     ③后端獲取get請求中的jsonpCallback    ④構造回調結構

$.ajax({
type : "GET",
async : false,
url : "http://a.a.com/a/FromServlet?userName=644064",
dataType : "jsonp",//數據類型為jsonp  
jsonp : "jsonpCallback",//服務端用于接收callback調用的function名的參數
success : function(data) {
alert(data["userName"]);
},
error : function() {
alert('fail');
}
});
 
//后端
        String jsonpCallback = request.getParameter("jsonpCallback");
//構造回調函數格式jsonpCallback(數據)
resp.getWriter().println(jsonpCallback+"("+jsonObject.toJSONString()+")");

JSONP實現原理

在同源策略下，在某個服務器下的頁面是無法獲取到該服務器以外的數據的，即一般的ajax是不能進行跨域請求的。但 img、iframe 、script等標簽是個例外，這些標簽可以通過src屬性請求到其他服務器上的數據。利用<script>標簽的開放策略，我們可以實現跨域請求數據，當然這需要服務器端的配合。 Jquery中ajax的核心是通過 XmlHttpRequest獲取非本頁內容，而jsonp的核心則是動態添加<script>標簽來調用服務器提供的 js腳本。

　　當我們正常地請求一個JSON數據的時候，服務端返回的是一串JSON類型的數據，而我們使用 JSONP模式來請求數據的時候服務端返回的是一段可執行的JavaScript代碼。因為jsonp 跨域的原理就是用的動態加載<script>的src ，所以我們只能把參數通過url的方式傳遞,所以jsonp的 type類型只能是get ！

示例：

$.ajax({
    url: 'http://192.168.10.46/demo/test.jsp',        //不同的域
    type: 'GET',                                                        // jsonp模式只有GET 是合法的
    data: {
        'action': 'aaron'
    },
    dataType: 'jsonp',                                              // 數據類型
    jsonp: 'jsonpCallback',                                     // 指定回調函數名，與服務器端接收的一致，并回傳回來
})

其實jquery 內部會轉化成

http://192.168.10.46/demo/test.jsp?jsonpCallback=jQuery202003573935762227615_1402643146875&action=aaron

然后動態加載

<script type="text/javascript"src="http://192.168.10.46/demo/test.jsp?jsonpCallback= jQuery202003573935762227615_1402643146875&action=aaron"></script>

然后后端就會執行jsonpCallback(傳遞參數 )，把數據通過實參的形式發送出去。

　　使用JSONP 模式來請求數據的整個流程：客戶端發送一個請求，規定一個可執行的函數名（這里就是 jQuery做了封裝的處理，自動幫你生成回調函數并把數據取出來供success屬性方法來調用,而不是傳遞的一個回調句柄），服務器端接受了這個 jsonpCallback函數名，然后把數據通過實參的形式發送出去

（在jquery 源碼中， jsonp的實現方式是動態添加<script>標簽來調用服務器提供的 js腳本。jquery 會在window對象中加載一個全局的函數，當 <script>代碼插入時函數執行，執行完畢后就 <script>會被移除。同時jquery還對非跨域的請求進行了優化，如果這個請求是在同一個域名下那么他就會像正常的 Ajax請求一樣工作。）

解決方式3：httpClient內部轉發

實現原理很簡單，若想在B站點中通過Ajax訪問A站點獲取結果，固然有ajax跨域問題，但在B站點中訪問B站點獲取結果，不存在跨域問題，這種方式實際上是在B站點中ajax請求訪問B站點的HttpClient，再通過HttpClient轉發請求獲取A站點的數據結果。但這種方式產生了兩次請求，效率低，但內部請求，抓包工具無法分析，安全。

$.ajax({
type : "GET",
async : false,
url : "http://b.b.com:8080/B/FromAjaxservlet?userName=644064",
dataType : "json",
success : function(data) {
alert(data["userName"]);
},
error : function() {
alert('fail');
}
});
 
@WebServlet("/FromAjaxservlet")
public class FromAjaxservlet extends HttpServlet{
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
try {
//創建默認連接
CloseableHttpClient httpClient = HttpClients.createDefault();
//創建HttpGet對象,處理get請求,轉發到A站點
HttpGet httpGet = new HttpGet("http://a.a.com:8080/A/FromServlet?userName="+req.getParameter("userName")); 
                        //執行
CloseableHttpResponse response = httpClient.execute(httpGet);
int code = response.getStatusLine().getStatusCode();
//獲取狀態
System.out.println("http請求結果為:"+code);
if(code == 200){
                                //獲取A站點返回的結果
String result = EntityUtils.toString(response.getEntity());
System.out.println(result);
                                //把結果返回給B站點
resp.getWriter().print(result);
}
response.close();
httpClient.close();
} catch (Exception e) {
}
}
}

解決方式4：使用nginx搭建企業級接口網關方式

www.a.a.com不能直接請求www.b.b.com的內容，可以通過nginx，根據同域名，但項目名不同進行區分。什么意思呢？這么說可能有點抽象。假設我們公司域名叫www.nginxtest.com

當我們需要訪問www.a.a.com通過www.nginxtest.com/A訪問，并通過nginx轉發到www.a.a.com

當我們需要訪問www.b.b.com通過www.nginxtest.com/B訪問，并通過nginx轉發到www.a.a.com

我們訪問公司的域名時，是"同源"的，只是項目名不同，此時項目名的作用只是為了區分，方便轉發。如果你還不理解的話，先看看我是怎么進行配置的：

server {
        listen       80;
        server_name  www.nginxtest.com;
        location /A {
    proxy_pass  http://a.a.com:81;
index  index.html index.htm;
        }
location /B {
    proxy_pass  http://b.b.com:81;
index  index.html index.htm;
        }
    }

我們訪問以www.nginxtest.com開頭且端口為80的網址，nginx將會進行攔截匹配，若項目名為A，則分發到a.a.com:81。實際上就是通過"同源"的域名，不同的項目名進行區分，通過nginx攔截匹配，轉發到對應的網址。整個過程，兩次請求，第一次請求nginx服務器，第二次nginx服務器通過攔截匹配分發到對應的網址。

感謝各位的閱讀！看完上述內容，你們對ajax跨域問題的解決方法大概了解了嗎？希望文章內容對大家有所幫助。如果想了解更多相關文章內容，歡迎關注億速云行業資訊頻道。