1. 跨域

1.1 跨域測驗

1.1.1 JT-MANAGE后端測驗

1.頁面結構

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>測驗JSON跨域問題</title>
<script type="text/javascript" src="http://manage.jt.com/js/jquery-easyui-1.4.1/jquery.min.js"></script>
<script type="text/javascript">
	$(function(){
		$.get("http://manage.jt.com/test.json",function(data){
			alert(data.name);
		})
	})
</script>
</head>
<body>
	<h1>JSON跨域請求測驗</h1>
</body>
</html>

2.資料結構

{"id":"1","name":"tom"}

3.分析
瀏覽器URL地址: http://manage.jt.com/test.html
頁面AjaxURl地址: http://manage.jt.com/test.json

發現:協議:域名:埠都相同時,請求可以正常執行

1.2 同源策略

規定: 如果瀏覽器的地址與Ajax的請求地址 協議名稱://域名地址:埠號 如果都相同則滿足同源策略.瀏覽器可以正常的決議回傳值. 如果三者之間有一個不同,則違反了同源策略.瀏覽器不會決議回傳值.
在這里插入圖片描述

1.3 什么是跨域

由于業務需要,通常A服務器中的資料可能來源于B服務器. 當瀏覽器通過網址決議頁面時,如果頁面內部發起ajax請求.如果瀏覽器的訪問地址與Ajax訪問地址不滿足同源策略時,則稱之為跨域請求.
跨域要素:
1.瀏覽器
2.決議ajax
3.違反了同源策略

1.4 JSONP跨域訪問

1.4.1 JSONP介紹

JSONP(JSON with Padding)是JSON的一種“使用模式”，可用于解決主流瀏覽器的跨域資料訪問的問題，由于同源策略，一般來說位于 server1.example.com 的網頁無法與不是 server1.example.com的服務器溝通，而 HTML 的

1.4.2 JSONP原理說明

1.利用javaScript中的src屬性可以跨域的訪問.

<script type="text/javascript" src="http://manage.jt.com/test.json"></script>

2.提前準備一個回呼函式 callback()

/*定義回呼函式  */
		function hello(data){
			alert(data.name);
		}

3.將回傳值結果進行特殊的格式封裝. callback(JSON資料)

hello({"id":"1","name":"tom"})

1.5 JSONP高級API

1.5.1 編輯前端WEB頁面

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JSONP測驗</title>
<script type="text/javascript" src="http://manage.jt.com/js/jquery-easyui-1.4.1/jquery.min.js"></script>
<script type="text/javascript">
	$(function(){ //讓頁面加載完成之后再次執行
		alert("測驗訪問開始!!!!!")
		$.ajax({
			url:"http://manage.jt.com/web/testJSONP",
			type:"get",				//jsonp只能支持get請求
			dataType:"jsonp",       //dataType表示回傳值型別
			jsonp: "callback",    //指定引數名稱
			jsonpCallback: "hello",  //指定回呼函式名稱
			success:function (data){   //data經過jQuery封裝回傳就是json串
				alert(data.id);
				alert(data.name);
				//轉化為字串使用
				//var obj = eval("("+data+")");
				//alert(obj.name);
			}	
		});	
	})
</script>
</head>
<body>
	<h1>JSON跨域請求測驗</h1>
</body>
</html>

1.5.2 JSONP頁面請求分析

在這里插入圖片描述
毫秒數作用: 由于瀏覽器進行業務請求時可能有快取操作,所以添加毫秒數,避免瀏覽器將結果快取.導致業務例外.

1.5.3 編輯后端服務器

package com.jt.web;

import com.fasterxml.jackson.databind.util.JSONPObject;
import com.jt.pojo.ItemDesc;
import com.jt.util.ObjectMapperUtil;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
public class WebJSONPController {

    /**
     * 完成JSONP跨域訪問
     * url地址: http://manage.jt.com/web/testJSONP?callback=hello&_=1605584709377
     * 引數:    callback 回呼函式的名稱
     * 回傳值:  callback(json)
     */
    @RequestMapping("/web/testJSONP")
    public JSONPObject testJSONP(String callback){
        ItemDesc itemDesc = new ItemDesc();
        itemDesc.setItemId(1000L).setItemDesc("JSONP遠程呼叫!!!");
        JSONPObject jsonpObject = new JSONPObject(callback, itemDesc);
        return jsonpObject;
    }
}

1.6 CORS跨域實作

1.6.1 CORS介紹

因為出于安全的考慮, 瀏覽器不允許Ajax呼叫當前源之外的資源. 即瀏覽器的同源策略.
CORS需要瀏覽器和服務器同時支持，目前，所有主流瀏覽器都支持該功能，IE瀏覽器不能低于IE10，在瀏覽器端, 整個CORS通信程序都是瀏覽器自動完成，在請求之中添加回應頭資訊,如果服務器允許執行跨域訪問.,則瀏覽器的同源策略放行.
在這里插入圖片描述

1.6.2 跨域檢驗

說明: 由www.jt.com/test.html訪問頁面,之后內部由ajax發起請求. 得到如圖的資訊.資訊中顯示,幾乎所有的瀏覽器都兼容CORS的方式,但是由于服務器不允許跨域,所以請求被拒.
在這里插入圖片描述

1.6.3 配置后端服務器

由于跨域需求其他的服務器也會需要跨域.所以在jt-common中添加跨域的配置

package com.jt.config;

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

/**
 * 完成CORS跨域配置: 實作思路在請求的回應頭中添加訪問資訊.
 */
@Configuration
public class CORSConfig implements WebMvcConfigurer{//web專案的全域配置的介面.

    /**
     * 引數介紹:
     *      1.addMapping()  哪些請求可以進行跨域操作
     *        addMapping("/**")   表示所有訪問后端的服務器的請求都允許跨域
     *        addMapping("/addUser/**")  表示部分請求可以跨域
     *        /*       只能攔截一級目錄
     *        /**      可以攔截多級目錄
     *
     *      2.allowedOrigins("*")  允許哪些網站跨域
     *      3.allowCredentials(true)  請求跨域時是否允許攜帶Cookie/Session相關
     * @param registry
     */
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("*")
                .allowCredentials(true);
                //.maxAge();       默認30分鐘 是否允許跨域請求 30分鐘之內不會再次驗證
                //.allowedMethods() 允許請求型別
    }
}

1.6.4 回應資訊

在這里插入圖片描述

1.7 關于跨域說明

1.什么叫跨域瀏覽器決議Ajax時,發起url請求違反了同源策略時,稱之為跨域.
2.什么時候用跨域一般A服務器需要從B服務器中獲取資料時,可以采用跨域的方式.
3.什么是JSONP JSONP是JSON的一種使用模式利用javaScript中的src屬性進行跨域請求.(2.自定義回呼函式,3.將回傳值進行特殊格式封裝)
4.什么是CORS CORS是當前實作跨域的主流方式,現在所有的主流瀏覽器都支持,需要在服務器端配置是否允許跨域的配置. 只要配置了(在回應頭中添加允許跨域的標識),則同源策略不生效,則可以實作跨域.

2.用戶資料校驗

2.1 創建JT-SSO

2.1.1 創建專案

在這里插入圖片描述

2.1.2 添加繼承/依賴/插件

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <artifactId>jt-sso</artifactId>
    <!--默認打包就是jar包-->

    <parent>
        <artifactId>jt2007</artifactId>
        <groupId>com.jt</groupId>
        <version>1.0-SNAPSHOT</version>
    </parent>

    <!--3.依賴工具API-->
    <dependencies>
        <dependency>
            <groupId>com.jt</groupId>
            <artifactId>jt-common</artifactId>
            <version>1.0-SNAPSHOT</version>
        </dependency>
    </dependencies>

    <!--4.添加maven插件-->
    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
            </plugin>
        </plugins>
    </build>
</project>

2.1.3 編輯User POJO物件

@TableName("tb_user")
@Data
@Accessors(chain = true)
public class User extends BasePojo{

    @TableId(type = IdType.AUTO)
    private Long id;        //主鍵自增
    private String username;
    private String password;    //密碼
    private String phone;       //電話號碼
    private String email;       //郵箱地址  暫時使用電話號碼代替
}

2.1.4 編輯sso服務器

在這里插入圖片描述

2.1.5 編輯nginx.conf

在這里插入圖片描述
修改之后,重啟nginx即可

2.2 完成用戶資料校驗

2.2.1 頁面URL分析

在這里插入圖片描述

2.2.2 查詢頁面JS

在這里插入圖片描述

2.2.3 分析頁面JS

在這里插入圖片描述

2.2.4 業務介面檔案說明

在這里插入圖片描述

2.2.5 編輯JT-SSO UserController

package com.jt.controller;

import com.fasterxml.jackson.databind.util.JSONPObject;
import com.jt.pojo.User;
import com.jt.service.UserService;
import com.jt.vo.SysResult;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import java.util.List;

@RestController
@RequestMapping("/user")
public class UserController {

    @Autowired
    private UserService userService;

    /**
     * 業務需求: 查詢所有用戶資訊
     * url:  sso.jt.com   localhost:8093   /findAll
     * 回傳值: List<User>
     */
    @RequestMapping("/findAll")
    public List<User> findAll(){

        return userService.findAll();
    }


    /**
     * 需求:實作用戶資訊校驗
     * 校驗步驟:  需要接收用戶的請求,之后利用RestFul獲取資料,
     *            實作資料庫校驗,按照JSONP的方式回傳資料.
     * url地址:   http://sso.jt.com/user/check/admin123/1?r=0.8&callback=jsonp16
     * 引數:      restFul方式獲取
     * 回傳值:    JSONPObject
     */
    @RequestMapping("/check/{param}/{type}")
    public JSONPObject checkUser(@PathVariable String param,
                                 @PathVariable Integer type,
                                 String callback){
        //只需要校驗資料庫中是否有結果
        boolean flag = userService.checkUser(param,type);
        SysResult sysResult = SysResult.success(flag);
        return new JSONPObject(callback, sysResult);
    }
}

2.2.6 編輯JT-SSO UserService

package com.jt.service;

import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
import com.jt.mapper.UserMapper;
import com.jt.pojo.User;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import java.util.HashMap;
import java.util.List;
import java.util.Map;

@Service
public class UserServiceImpl implements UserService{

    @Autowired
    private UserMapper userMapper;
    private static Map<Integer,String> paramMap = new HashMap<>();

    static {
        paramMap.put(1, "username");
        paramMap.put(2, "phone");
        paramMap.put(3, "email");
    }




    @Override
    public List<User> findAll() {

        return userMapper.selectList(null);
    }

    /**
     *  校驗資料庫中是否有資料....
     *  Sql: select count(*) from tb_user where username="admin123";
     *  要求:回傳資料true用戶已存在，false用戶不存在
     */
    @Override
    public boolean checkUser(String param, Integer type) {
        String column = paramMap.get(type);
        QueryWrapper<User> queryWrapper = new QueryWrapper<>();
        queryWrapper.eq(column,param);
        int count = userMapper.selectCount(queryWrapper);
        return count>0?true:false;
        //return count>0;
    }
}

2.2.7 頁面效果展現

在這里插入圖片描述

2.3 全域例外處理

2.3.1 編輯頁面JS

在這里插入圖片描述

2.3.2 修改全域例外處理

package com.jt.aop;

import com.fasterxml.jackson.databind.util.JSONPObject;
import com.jt.vo.SysResult;
import org.springframework.util.StringUtils;
import org.springframework.web.bind.annotation.ExceptionHandler;
import org.springframework.web.bind.annotation.RestControllerAdvice;

import javax.servlet.http.HttpServletRequest;

@RestControllerAdvice  //定義全域例外處理
public class SystemException {

    //遇到運行時例外時方法執行.
    //JSONP報錯 回傳值 callback(JSON) 如果請求引數中包含callback引數,則標識為跨域請求
    @ExceptionHandler({RuntimeException.class})
    public Object fail(Exception e, HttpServletRequest request){
        e.printStackTrace();    //輸出例外資訊.
        String callback = request.getParameter("callback");
        if(StringUtils.isEmpty(callback)){
            //如果引數為空表示 不是跨域請求.
            return SysResult.fail();
        }else{
            //有callback引數,表示是跨域請求.
            SysResult sysResult = SysResult.fail();
            return new JSONPObject(callback,sysResult);
        }
    }
}

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/224040.html

標籤：其他

上一篇：最全前端面試總結

下一篇：最近學習了幾天JQuery,寫了個操作table 的網頁,加上ajax可以直接拿去用

cgb2007-京淘day16

1. 跨域

1.1 跨域測驗

1.1.1 JT-MANAGE后端測驗

1.2 同源策略

1.3 什么是跨域

1.4 JSONP跨域訪問

1.4.1 JSONP介紹

1.4.2 JSONP原理說明

1.5 JSONP高級API

1.5.1 編輯前端WEB頁面

1.5.2 JSONP頁面請求分析

1.5.3 編輯后端服務器

1.6 CORS跨域實作

1.6.1 CORS介紹

1.6.2 跨域檢驗

1.6.3 配置后端服務器

1.6.4 回應資訊

1.7 關于跨域說明

2.用戶資料校驗

2.1 創建JT-SSO

2.1.1 創建專案

2.1.2 添加繼承/依賴/插件

2.1.3 編輯User POJO物件

2.1.4 編輯sso服務器

2.1.5 編輯nginx.conf

2.2 完成用戶資料校驗

2.2.1 頁面URL分析

2.2.2 查詢頁面JS

2.2.3 分析頁面JS

2.2.4 業務介面檔案說明

2.2.5 編輯JT-SSO UserController

2.2.6 編輯JT-SSO UserService

2.2.7 頁面效果展現

2.3 全域例外處理

2.3.1 編輯頁面JS

2.3.2 修改全域例外處理