跨域問題：前端測試時有CORS 關鍵字的報錯，就是因爲跨域問題，大概的理解一下，就是因爲瀏覽器因爲從一個域名訪問另一個域名，爲安全，不允許訪問，所以需要用特殊的方法來解決這個問題，因爲本人也是初級小白，所以找遍各位大神文章，終於整理出來了一個樣例，可以解決這個問題。
但爲什麼我要解決跨域訪問的問題呢，因爲在學習時，用後端生成JSON數據，想在前端獲得JSON數據，這樣不知道算不算是前後端分離，但這樣確實方便些，但問題也來了，就是在測試時，因爲不是一個開發工具，所以就變成了兩個域名的網站進行訪問，所以就出現在上面的問題。
本段爲servlet後端的樣例
package servlet;
import dao.dao_GetData;
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 javax.servlet.http.HttpSession;
import java.io.IOException;
/**
* @author UnMobile
* @create 2019-06-23 15:36
*/
@WebServlet("/ServletGetData")
public class ServletGetData extends HttpServlet
{
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException
{
//爲了返回的是JSON格式，所以需使用下方的頭設置
response.setContentType("application/json");
// 這句話的意思，是讓瀏覽器用 utf8 文本 來解析返回的數據
//response.setHeader("Content-type", "text/html;charset=UTF-8");
// 這句話的意思，是告訴servlet用UTF-8轉碼，而不是用默認的ISO8859
request.setCharacterEncoding("utf-8");
response.setCharacterEncoding("UTF-8");
//設置爲跨域獲得JSON所需使用的函數
String funString = request.getParameter("callback");
if (funString == null)
{
//相當於默認 前端的ajax回調函數爲 callback
funString = "callback";
}
String jsonString = "這就是要返回的JSON字符"
response.getWriter().println(funString + "(" + jsonString + ")");
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException
{
this.doPost(request, response);
}
}
本段爲前端樣例代碼
<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript" src="/js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
function getData() {
var url = "http://127.0.0.1:8080/getdata";
$.ajax({
type: "get",
async: false,
url: encodeURI(url),
dataType: "jsonp",
jsonp: "callback", // 後臺定義的回調函數標識符(一般默認爲:callback)
jsonpCallback: "jsonCallback", // 自定義的jsonp回調函數名稱(默認爲jQuery自動生成的隨機函數名)
success: function(data) {
console.log(data);
console.log(status);
},
error: function() {
alert('失敗！');
}
});
}
</script>
</head>
<body>
<button onclick="getData();">測試跨域獲得JSON數據</button>
</body>
</html>