国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

慕課網_《Ajax跨域完全講解》學習總結

fredshare / 2938人閱讀

摘要：時間年月日星期三說明本文部分內容均來自慕課網。當預檢請求通過的時候，才發送真正的請求。

時間：2018年04月18日星期三
說明：本文部分內容均來自慕課網。@慕課網：https://www.imooc.com
教學源碼：https://github.com/zccodere/s...
學習源碼：https://github.com/zccodere/s...

第一章：課程介紹 1-1 課程介紹

課程介紹

什么是AJAX跨域問題

產生AJAX跨域問題的原因

解決AJAX跨域問題的思路和方法

什么是AJAX跨域問題

簡單來說，就是前端調用后端服務接口時

如果服務接口不是同一個域，就會產生跨域問題

AJAX跨域場景

前后端分離、服務化的開發模式

前后端開發獨立，前端需要大量調用后端接口的場景

只要后端接口不是同一個域，就會產生跨域問題

跨域問題很普遍，解決跨域問題也很重要

AJAX跨域原因

瀏覽器限制：瀏覽器安全校驗限制

跨域（協議、域名、端口任何一個不一樣都會認為是跨域）

XHR（XMLHttpRequest）請求

AJAX跨域問題解決思路

瀏覽器：瀏覽器取下跨域校驗，實際價值不大

XHR：不使用XHR，使用JSONP，有很多弊端，無法滿足現在的開發要求

跨域：被調用方修改支持跨域調用（指定參數）；調用方修改隱藏跨域（基于代理）

編寫測試代碼

被調用方后端代碼編寫：Spring Boot

調用方前端代碼編寫：Jquery

引入前端Jasmine測試框架

第二章：環境搭建 2-1 后端項目

代碼編寫

1.創建名為ajax-server的maven工程pom如下



    4.0.0

    com.myimooc
    ajax-server
    0.0.1-SNAPSHOT
    jar

    ajax-server
    Demo project for Spring Boot

    
        org.springframework.boot
        spring-boot-starter-parent
        2.0.1.RELEASE
         
    

    
        UTF-8
        UTF-8
        1.8
    

    
        
            org.springframework.boot
            spring-boot-starter-web
        

        
            org.springframework.boot
            spring-boot-starter-test
            test
        
    

    
        
            
                org.springframework.boot
                spring-boot-maven-plugin

2.編寫AjaxServerStart類

package com.myimooc.ajax.server;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

/**
 * 

 * 標題: 啟動類

 * 描述: AJAX跨域講解后端項目

 *
 * @author zc
 * @date 2018/04/18
 */
@SpringBootApplication
public class AjaxServerStart {

    public static void main(String[] args) {
        SpringApplication.run(AjaxServerStart.class, args);
    }
}

3.編寫ResultBean類

package com.myimooc.ajax.server.vo;

import java.io.Serializable;

/**
 * 

 * 標題: REST請求響應POJO類

 * 描述: 封裝請求響應結果

 *
 * @author zc
 * @date 2018/04/18
 */
public class ResultBean implements Serializable{

    private static final long serialVersionUID = 7867107433319736719L;

    private String data;

    public ResultBean(String data) {
        this.data = data;
    }

    public String getData() {
        return data;
    }

    public void setData(String data) {
        this.data = data;
    }
}

4.編寫TestController類

package com.myimooc.ajax.server.controller;

import com.myimooc.ajax.server.vo.ResultBean;
import com.myimooc.ajax.server.vo.User;
import org.springframework.web.bind.annotation.*;

/**
 * 

 * 標題: 測試控制器

 * 描述: 提供REST服務

 * 使用 @CrossOrigin 注解支持跨域，可以放到類或方法上面
 * @author zc
 * @date 2018/04/18
 */
@RestController
@RequestMapping("/test")
//@CrossOrigin
public class TestController {

    @GetMapping("/get1")
    public ResultBean get1() {
        System.out.println("TestController.get1");
        return new ResultBean("get1ok");
    }

    @PostMapping("/postJson")
    public ResultBean postJson(@RequestBody User user) {
        System.out.println("TestController.postJson");
        return new ResultBean("postJson" + user.getName());
    }

    @GetMapping("/getCookie")
    public ResultBean getCookie(@CookieValue(value = "cookie1") String cookie1) {
        System.out.println("TestController.getCookie");
        return new ResultBean("getCookie" + cookie1);
    }

    @GetMapping("/getHeader")
    public ResultBean getHeader(
            @RequestHeader("x-header1") String header1,
            @RequestHeader("x-header2") String header2) {
        System.out.println("TestController.getHeader");
        return new ResultBean("getHeader" + header1+header2);
    }
}
2-2 前端項目

代碼編寫

1.創建名為ajax-client的maven工程pom如下



    4.0.0

    com.myimooc
    ajax-client
    0.0.1-SNAPSHOT
    jar

    ajax-client
    Demo project for Spring Boot

    
        org.springframework.boot
        spring-boot-starter-parent
        2.0.1.RELEASE
         
    

    
        UTF-8
        UTF-8
        1.8
    

    
        
            org.springframework.boot
            spring-boot-starter-web
        
        
            org.webjars
            jquery
            3.3.0
        
        
            org.webjars
            jasmine
            2.5.0
        
    

    
        
            
                org.springframework.boot
                spring-boot-maven-plugin

2.編寫index.html




    
    Index

    

    
    
    
    




發生get1請求

3.編寫application.properties

server.port=8081

4.編寫AjaxClientStart類

package com.myimooc.ajax.client;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
public class AjaxClientStart {

    public static void main(String[] args) {
        SpringApplication.run(AjaxClientStart.class, args);
    }
}

5.啟動AjaxServerStart和AjaxClientStart，并訪問http://localhost:8081，點擊發生get1請求，產生跨域問題如下

第三章：解決跨域 3-1 禁止檢查

Chrome瀏覽器的跨域設置

Windows方法

參考文檔：https://www.cnblogs.com/laden...

使用說明：在屬性頁面中的目標輸入框里加上：--disable-web-security --user-data-dir=C:MyChromeDevUserData

Mac OS方法

參考文檔：http://blog.csdn.net/justinji...

使用說明：用命令行打開 Google Chrome：open -a "Google Chrome" --args --disable-web-security

3-2 使用JSONP

代碼編寫

1.編寫JsonpAdvice類

package com.myimooc.ajax.server.controller;

import org.springframework.web.bind.annotation.ControllerAdvice;
import org.springframework.web.servlet.mvc.method.annotation.AbstractJsonpResponseBodyAdvice;

/**
 * 

 * 標題: JSONP 全局處理

 * 描述: 統一處理JSONP

 *
 * @author zc
 * @date 2018/04/18
 */
@ControllerAdvice
public class JsonpAdvice extends AbstractJsonpResponseBodyAdvice{

    public JsonpAdvice() {
        // 與前端約定好回調方法名稱，默認是callback
        super("callback2");
    }
}

2.修改index.html

        // 測試方法
        it("jsonp請求", function (done) {
            // 服務器返回的結果
            var result;
            $.ajax({
                url: base + "/get1",
                dataType: "jsonp",
                jsonp:"callback2",
                success: function (res) {
                    result = res;
                }
            });

            // 由于是異步請求，需要使用setTimeout來校驗
            setTimeout(function () {
                expect(result).toEqual({
                    "data":"get1ok"
                });

                // 校驗完成，通知jasmine框架
                done();
            },100);
        });

JSONP的弊端

服務器需要改動代碼支持

只支持GET

發送的不是XHR請求

3-3 支持跨域

常見的JavaEE架構

跨域解決方向

被調用方解決

基于支持跨域的解決思路

基于Http協議關于跨域的相關規定，在響應頭里增加指定的字段告訴瀏覽器，允許調用

跨域請求是直接從瀏覽器發送到被調用方

修改被調用方的Http服務器

調用方解決

基于隱藏跨域的解決思路

跨域請求不會瀏覽器直接發送到被調用方

而是從中間的Http服務器（Apache、Nginx）轉發過去

修改調用方的Http服務器

被調用方支持跨域

【重點】Web應用服務器（Tomcat、Netty、WebLogic或應用程序）實現

Http服務器（Nginx）配置實現

Http服務器（Apache）配置實現

使用Filter解決

編寫代碼

1.編寫CrosFilter類

package com.myimooc.ajax.server.config;

import org.springframework.util.StringUtils;

import javax.servlet.*;
import javax.servlet.FilterConfig;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

/**
 * 

 * 標題: 服務端解決跨域

 * 描述: 使用Filter

 *
 * @author zc
 * @date 2018/04/18
 */
public class CrosFilter implements Filter {

    @Override
    public void init(FilterConfig filterConfig) throws ServletException {

    }

    @Override
    public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain) throws IOException, ServletException {
        HttpServletResponse res = (HttpServletResponse)response;

        HttpServletRequest req = (HttpServletRequest)request;

        // 支持所有域
        String origin = req.getHeader("Origin");
        if (!StringUtils.isEmpty(origin)){
            // 支持任何域名的跨域調用 且 支持帶cookie（是被調用方域名的cookie，而不是調用方的cookie）
            res.addHeader("Access-Control-Allow-Origin",origin);
        }
        // 指定允許的域，帶cookie時，origin必須是全匹配，不能使用 *
//        res.addHeader("Access-Control-Allow-Origin","http://localhost:8081");
        // 允許所有域，但不能滿足帶 cookie 的跨域請求
//        res.addHeader("Access-Control-Allow-Origin","*");

        // 支持所有自定義頭
        String headers = req.getHeader("Access-Control-Allow-Headers");
        if (!StringUtils.isEmpty(headers)){
            // 允許所有header
            res.addHeader("Access-Control-Allow-Headers",headers);
        }
        // 允許所有header
//        res.addHeader("Access-Control-Allow-Headers","*");

        // 指定允許的方法
//        res.addHeader("Access-Control-Allow-Methods","GET");
        // 允許所有方法
        res.addHeader("Access-Control-Allow-Methods","*");
        // 允許瀏覽器在一個小時內，緩存跨域訪問信息（即上面三個信息）
        res.addHeader("Access-Control-Max-Age","3600");
        // 啟用 cookie
        res.addHeader("Access-Control-Allow-Credentials","true");

        chain.doFilter(request,response);
    }

    @Override
    public void destroy() {

    }
}

2.編寫FilterConfig類

package com.myimooc.ajax.server.config;

import org.springframework.boot.web.servlet.FilterRegistrationBean;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;

/**
 * 

 * 標題: 配置類

 * 描述: 注冊CrosFilter

 *
 * @author zc
 * @date 2018/04/18
 */
@Configuration
public class FilterConfig {

    @Bean
    public FilterRegistrationBean registrationBean(){
        FilterRegistrationBean filter = new FilterRegistrationBean();
        filter.addUrlPatterns("/*");
        filter.setFilter(new CrosFilter());
        return filter;
    }
}

3.啟動AjaxServerStart和AjaxClientStart，并訪問http://localhost:8081，跨域解決

簡單請求與非簡單請求

簡單請求：瀏覽器先發送真正的請求后檢查

請求方法：GET、HEAD、POST的一種

請求header：無自定義header；Content-Type為：text/plain、multipart/form-data、application/x-www-form-urlencoded的一種

非簡單請求：瀏覽器先發預檢命令，檢查通過后，才發送真正的請求

常見的有：PUT、DELETE

其它條件：發送Json格式的請求、帶自定義header的請求

預檢命令：瀏覽器檢測到跨域請求, 會自動發出一個OPTIONS請求, 就是所謂的預檢（preflight）請求。當預檢請求通過的時候，才發送真正的請求。

Nginx配置

修改主機hosts文件增加映射本地域名：127.0.0.1 b.com（表示被調用方的域名）

在conf目錄下創建vhost目錄

修改nginx.conf在最后面增加一行代碼：include vhost/*.conf;

在vhost目錄下創建b.com.conf

啟動niginx，訪問b.com/test/get1

編寫b.com.conf

server{
    listen 80;
    server_name b.com;

    location /{
        proxy_pass http://localhost:8080/;

        add_header Access-Control-Allow-Methods *;
        add_header Access-Control-Max-Age 3600;
        add_header Access-Control-Allow-Credentials true;

        add_header Access-Control-Allow-Origin $http_origin;
        add_header Access-Control-Allow-Headers $http_access_control_allow_headers;

        if ($request_method = OPTIONS){
            return 200;
        }
    }
}

Apache配置

修改conf/httpd.conf找到LoadModule vhost_alias_module module/mod_vhost_alias.so取消注釋

修改conf/httpd.conf找到LoadModule proxy_module module/mod_ proxy.so取消注釋

修改conf/httpd.conf找到LoadModule proxy_http_module module/mod_ proxy_http.so取消注釋

修改conf/httpd.conf找到LoadModule headers_module module/mod_ headers.so取消注釋

修改conf/httpd.conf找到LoadModule rewrite_module module/mod_ rewrite.so取消注釋

修改conf/httpd.conf找到Include conf/extra/httpd-vhosts.conf取消注釋

修改conf/extra/httpd-vhosts.conf在最后面增加下面的內容即可


    ServerName b.com
    ErrorLog "logs/b.com-error.log"
    CustomLog "logs/b.com-access.log" common
    ProxyPass / http://localhost:8080/

    # 把請求頭的origin值返回到Access-Control-Allow-Origin字段
    Header always set Access-Control-Allow-Origin "expr=%{req:origin}"

    # 把請求頭的Access-Control-Allow-Headers值返回到Access-Control-Allow-Headers字段
    Header always Access-Control-Allow-Headers "expr=%{Access-Control-Allow-Headers}"

    Header always set Access-Control-Allow-Methods "*";
    Header always set Access-Control-Max-Age "3600";
    Header always set Access-Control-Allow-Credentials ""true";

    # 處理預檢命令OPTIONS，直接返回204
    RewriteEngine On
    RewriteCond %{REQUEST_METHOD}OPTIONS
    RewriteRule ^(.*)$"/" [R=204,L]

Spring框架支持

在類或方法上使用注解@CrossOrigin即可支持跨域

3-4 隱藏跨域

使用Nginx反向代理實現

修改主機hosts文件增加映射本地域名：127.0.0.1 a.com

在vhost目錄下創建a.com.conf

啟動niginx，訪問a.com/ajaxserver/get1

編寫a.com.conf

server{
    listen 80;
    server_name a.com;

    location /{
         proxy_pass http://localhost:8081/;
    }

    location /ajaxserver{
         proxy_pass http://localhost:8080/test/;
    }

}

使用Apache反向代理實現

修改conf/extra/httpd-vhosts.conf在最后面增加下面的內容即可


    ServerName a.com
    ErrorLog "logs/a.com-error.log"
    CustomLog "logs/a.com-access.log" common
    ProxyPass / http://localhost:8081/
    ProxyPass /ajaxserverapache http://localhost:8080/test
第四章：課程總結 4-1 課程總結

課程總結

產生原因：主要是瀏覽器對Ajax請求的限制

解決思路：JSONP、支持跨域、隱藏跨域

核心原理：了解Http協議關于跨域方面的規定

解決方法：使用Filter、Nginx正反向代理、Apache正反向代理、Spring框架支持

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/69141.html

相關文章

  • AJAX跨域簡單講解【Python版】

    摘要：結果如圖所示，第二個由于跨域仍然報錯，第三個則正常輸出在中修改也可以通過向瀏覽器返回特定響應頭，告訴瀏覽器它是允許被跨域調用的，使用的添加和兩個字段，更新如下將的方法請求的接口改為，依次點擊，第二個已經可以正常輸出內容 總結自慕課網：ajax跨域完全講解，并且原視頻中后臺為JAVA，這里改成了Python。 什么是AJAX跨域 只要協議、域名、端口有任何一個不同，都被當作是不同的域，...

    xiaochao 評論0 收藏0

  • 慕課網_《如何使用高德云圖在線制作屬于你的地圖》學習總結

    摘要：時間年月日星期日說明本文部分內容均來自慕課網。用戶可以在服務器端調用云存儲云檢索從而構建自己的存儲和檢索服務，甚至可以制作自己的數據管理臺。 時間：2017年08月13日星期日說明：本文部分內容均來自慕課網。@慕課網：http://www.imooc.com教學源碼：無學習源碼：https://github.com/zccodere/s... 第一章：云圖產品介紹 1-1 云圖產品介紹...

    k00baa 評論0 收藏0

  • 慕課網_《如何使用高德云圖在線制作屬于你的地圖》學習總結

    摘要：時間年月日星期日說明本文部分內容均來自慕課網。用戶可以在服務器端調用云存儲云檢索從而構建自己的存儲和檢索服務，甚至可以制作自己的數據管理臺。 時間：2017年08月13日星期日說明：本文部分內容均來自慕課網。@慕課網：http://www.imooc.com教學源碼：無學習源碼：https://github.com/zccodere/s... 第一章：云圖產品介紹 1-1 云圖產品介紹...

    afishhhhh 評論0 收藏0

  • 慕課網_《RxJava與RxAndroid基礎入門》學習總結

    時間：2017年10月16日星期一說明：本文部分內容均來自慕課網。@慕課網：http://www.imooc.com教學源碼：無學習源碼：https://github.com/zccodere/s... 第一章：課程簡介 1-1 課程介紹 本門課程的主要內容 RxJava是什么 RxAndroid是什么 RxJava常用操作符（重點、難點） 怎樣在項目中使用RxJava和RxAndroid 如何學...

    劉明 評論0 收藏0

發表評論

0條評論

fredshare

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<