當前位置：首頁 > 编程资源 > 综合教程 >内容正文

综合教程

ajax跨域问题以及解决方案_js跨域请求的三种方法

發布時間：2023/12/19 综合教程 29 生活家

生活随笔收集整理的這篇文章主要介紹了 ajax跨域问题以及解决方案_js跨域请求的三种方法小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

出于瀏覽器的同源策略限制。同源策略（Sameoriginpolicy）是一種約定，它是瀏覽器最核心也最基本的安全功能，如果缺少了同源策略，則瀏覽器的正常功能可能都會受到影響。可以說Web是構建在同源策略基礎之上的，瀏覽器只是針對同源策略的一種實現。同源策略會阻止一個域的javascript腳本和另外一個域的內容進行交互。所謂同源（即指在同一個域）就是兩個頁面具有相同的協議（protocol），主機（host）和端口號（port)

AJAX跨域請求

下面簡單模擬一個場景—–>>
前端有一個頁面

鼠標離開用戶名輸入框時,檢查是否符合要求,如果為空,則給提示,如果不為空,則異步查詢數據庫,后返回結果;

本次請求的頁面是8082端口的,而響應的ajax路徑卻是8080端口的

前端代碼—>

<!DOCTYPE html>
<html>
<head>
<title>$Title%sSourceCod</title>
<meta charset="UTF-8"/>
<script src="js/jquery-3.5.1.min.js"></script>
<script> function checkUname(){ 
 // 獲取輸入框中的內容 if(null == $("#unameI").val() || '' == $("#unameI").val()){ 
 $("#unameInfo").text("用戶名不能為空"); return; } $("#unameInfo").text(""); // 通過jQuery.ajax() 發送異步請求 $.ajax( { 
 type:"GET",// 請求的方式 GET POST url:"http://localhost:8080/loadPicture_war_exploded/checkName.do?", // 請求的后臺服務的路徑 data:"uname="+$("#unameI").val(),// 提交的參數 success:function(info){ 
 // 響應成功執行的函數 $("#unameInfo").text(info) } } ) } </script>
</head>
<body>
<form action="myServlet1.do" >
用戶名:<input id="unameI" type="text" name="uname" onblur="checkUname()">
<span id="unameInfo"></span><br/>
密碼:<input type="password" name="pwd"><br/>
<input type="submit" value="提交按鈕">
</form>
</body>
</html>

后端代碼—>

package com.gavin.controller;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
@WebServlet("/checkName.do")
public class testAjax extends HttpServlet { 

@Override
protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { 

String uname = req.getParameter("uname");
String callBack = req.getParameter("aaa");
System.out.println(uname);
String info = "";
if ("gavin".equals(uname)) { 

info = "用戶名已經占用";
} else { 

info = "用戶名可用";
}
// 向瀏覽器響應數據
resp.setCharacterEncoding("UTF-8");
resp.setContentType("text/javaScript;charset=UTF-8");
resp.getWriter().print(callBack + "('" + info + "')");
}
}

訪問的時候瀏覽器提示—>

原因—>

對 CORS 請求的響應缺少必需的Access-Control-Allow-Origin頭，其用于確定在當前源內操作的資源是否可以訪問。
如果服務器在您的控制之下，請將請求站點的源添加到允許訪問的域集，方法是將其添加到Access-Control-Allow-Origin頭的值。

為什么會有跨域呢?
因為實際應用中分布式與集群會涉及到跨域,前端服務器與后端服務器分離,前端服務異步請求后端服務器就涉及到了跨域;

由于瀏覽器的同源策略,所以跨服務器訪問會有一些小麻煩,先一步一步探索去解決;

這個時候js文件能不能加載生效呢? 答案是生效了;

Web頁面上調用js文件時可以跨域,也就是后擁有”src”這個屬性的標簽都卻擁有跨域的能力

那么我們轉變思路,如果將異步請求轉到js文件身上
比如我們可以這么做

后端可以接收到前端數據;
但是這樣寫看起來怪怪的,而且實際上這樣異步請求中的url依然會被瀏覽器攔截

如果去掉這個url,會發生不可描述的事情,像這樣—-整個span被頁面代碼填滿,

那怎么處理呢?

此時異步請求添加一個屬性—dataType:“jsonp”
這樣就可以正常一點實現跨域的異步請求了—>

        function checkUname(){
// 獲取輸入框中的內容
if(null == $("#unameI").val() || '' == $("#unameI").val()){
$("#unameInfo").text("用戶名不能為空");
return;
}
$("#unameInfo").text("");
// 通過jQuery.ajax() 發送異步請求
$.ajax(
{
type:"GET",// 請求的方式 GET  POST
url:"http://localhost:8080/loadPicture_war_exploded/checkName.do?", // 請求的后臺服務的路徑
data:"uname="+$("#unameI").val(),// 提交的參數
dataType:"jsonp",
success:function(info){ // 響應成功執行的函數
$("#unameInfo").text(info)
}
}
)
}

原因—->>

雖然跨域請求實現了,但是前端接收不到后端返回的數據,即異步請求中的success方法失效了,
為什么失效?因為如果是通過script來完成異步請求,那么返回的內容應該是一個js代碼,

既然是這樣,我們要想在span中添加返回類的信息,那么我們不妨在前端寫一個方法,用于專門像span中添加信息—然后后端返回的信息來直接調這個方法就好了;

			function showInfo(info){
$("#unameInfo").val(info);
}

后端返回的數據

運行原理——>>>>

解決一個小痛點,前端方法名隨時可能變化,為了降低耦合度,一般會這么做,前端發送的數據中攜帶該方法名;

前面不是說success廢了嗎?我就想用這個方法,不想在額外定義一個別的showInfo方法,那么這個該怎么做呢?
在異步請求上添加一個參數:
jsonp:“任意的名稱A”

GetJson實現跨域請求

	        function checkUname(){
// 獲取輸入框中的內容
if(null == $("#unameI").val() || '' == $("#unameI").val()){
$("#unameInfo").text("用戶名不能為空");
return;
}
$("#unameInfo").text("");
$.getJSON(
"http://localhost:8080/loadPicture_war_exploded/checkName.do?jsoncallback=?",
{uname:$("#unameI").val()},
function(info){
$("#unameInfo").text(info)
}
)
}

通過后臺代碼也可以實現跨域,一般在過濾器中添加如下代碼,那么前端在請求時就不用考慮跨域問題了

/*請求地址白名單 *代表所有 /
resp.setHeader(“Access-Control-Allow-Origin”, ““);
/*請求方式白名單 */
resp.setHeader(“Access-Control-Allow-Methods”, “POST, GET, OPTIONS, DELETE”);
resp.setHeader(“Access-Control-Max-Age”, “3600”);
resp.setHeader(“Access-Control-Allow-Headers”, “x-requested-with”);

在結合springmvc之后,可以通過一個注解來完成跨域

CrossOrigin注解實現跨域

package com.gavin.controller;
import com.gavin.pojo.AlertMsg;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.*;
@Controller
public class AjaxTEST  { 

@CrossOrigin(value ="http://127.0.0.1:8020" )
@RequestMapping("/checkName3.do")
@ResponseBody
public AlertMsg checkUserName(@RequestBody AlertMsg alertMsg)  { 

System.out.println(alertMsg);
if ("gavin".equals(alertMsg.getUname())) { 

alertMsg.setMsg("用戶名已經占用");
} else { 

alertMsg.setMsg( "用戶名可用");
}
// 向瀏覽器響應數據----返回一個json格式的數據
System.out.println(alertMsg);
return alertMsg;
}
}

			function checkUname3() {
// 獲取輸入框中的內容
if(null == $("#unameI3").val() || '' == $("#unameI3").val()) {
$("#unameInfo3").text("用戶名不能為空");
return;
}
$("#unameInfo3").text("");
var str = $("#unameI3").val();
$.ajax({
type: "post",
url: "http://localhost:8080/loadPicture_war_exploded/checkName3.do?",
//					data:{uname:$("#unameI3").val(),msg:""},
//data:{"uname":$("#unameI3").val(),"msg":""},
data: JSON.stringify({
uname: $("#unameI3").val()
}),
dataType: "json",
contentType: "application/json;charset=UTF-8",
success: function(data) {
$("#unameInfo3").text(data.msg);
}
});
}

關于json對象的一些感悟與理解；
前端傳過來的數據—-可能是字符串，也可能是json對象，但是在處理的時候還是以字符串進行處理的，
JSON.stringify()方法是將一個JavaScript對象轉換成符合JSON格式的字符串，然后后端通過解析字符串在轉化為一個json對象；
所以
ajax跨域的解決方案有種了，
第一種是 jsonp的形式，
另一種是getjson（）
最后一種是注解CrossOrigin

總結

以上是生活随笔為你收集整理的ajax跨域问题以及解决方案_js跨域请求的三种方法的全部內容，希望文章能夠幫你解決所遇到的問題。

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

上一篇：文献记录(part74)--Subspa
下一篇： MultipeerConnectivit