<ruby id="bdb3f"></ruby>

    <p id="bdb3f"><cite id="bdb3f"></cite></p>

      <p id="bdb3f"><cite id="bdb3f"><th id="bdb3f"></th></cite></p><p id="bdb3f"></p>
        <p id="bdb3f"><cite id="bdb3f"></cite></p>

          <pre id="bdb3f"></pre>
          <pre id="bdb3f"><del id="bdb3f"><thead id="bdb3f"></thead></del></pre>

          <ruby id="bdb3f"><mark id="bdb3f"></mark></ruby><ruby id="bdb3f"></ruby>
          <pre id="bdb3f"><pre id="bdb3f"><mark id="bdb3f"></mark></pre></pre><output id="bdb3f"></output><p id="bdb3f"></p><p id="bdb3f"></p>

          <pre id="bdb3f"><del id="bdb3f"><progress id="bdb3f"></progress></del></pre>

                <ruby id="bdb3f"></ruby>

                ??一站式輕松地調用各大LLM模型接口,支持GPT4、智譜、豆包、星火、月之暗面及文生圖、文生視頻 廣告
                # 2. CORS 進階之 Preflight 請求 #### 1. Access-Control-Allow-Origin 上一篇[從跨域到CORS(一)](http://www.rails365.net/articles/cong-kua-yu-dao-cors-yi)文章有說過CORS的基本使用,也實現了跨域的請求。本篇來講講CORS更高階的用法。 首先來講講`Access-Control-Allow-Origin`的用法。 `Access-Control-Allow-Origin:*`表示的是允許任何的來源都可以訪問,然而這并不符合大多數人的需求。假如我們只需要固定的一臺或幾臺機器,或者是某個域名下的才可以訪問,這又該如何呢? 還是按照先前的例子,從localhost:3000的服務跨域到nginx服務localhost:8080。現在來演示一下,只允許localhost:3000的訪問,在nginx是這樣配置的。 ``` location / { add_header 'Access-Control-Allow-Origin' 'http://localhost:3000'; } ``` ![](https://box.kancloud.cn/1a2ab3bb6a240105f898800d22925dfe_597x202.png) 可見,是成功的。 也可以試一下把`http://localhost:3000`前面的`http://`去掉,會發現是不成功的,畢竟不同的協議也是不同的域的。 ![](https://box.kancloud.cn/8e4e1f72369225314d56fb7086a7e89f_1256x220.png) 下面有個配置可以參考,在nginx中設置域名的訪問。 ``` set $cors ''; if ($http_origin ~* 'https?://(localhost|www\.yourdomain\.com|www\.yourotherdomain\.com)') { set $cors 'true'; } if ($cors = 'true') { add_header 'Access-Control-Allow-Origin' "$http_origin"; } ``` 在上面的配置中,`$http_origin`表示的是獲得來源域的域名,也就是請求頭`Origin`的內容。 #### 2. Preflight請求 之前在瀏覽器模擬跨域請求的js是這樣的: ``` var xhttp = new XMLHttpRequest(); xhttp.open("GET", "http://localhost:8080", true); xhttp.send(); ``` 使用的方法是GET,CORS跟jsonp等方法不一樣的,它可以支持像POST,DELETE方法。 先用POST方法來試一下,nginx那邊需要改一下: ``` server { error_page 405 =200 $uri; } ``` 再把js中的`GET`改成`POST`方法。 ![](https://box.kancloud.cn/ee23dacc889d130905a122a17dcc2d98_663x198.png) 可見,是成功的。如果改成DELETE方法呢? ![](https://box.kancloud.cn/495ed32d118fca981675cf908ba46679_1154x201.png) 報錯了,大體上說DELETE方法是不被允許的。來看下產生的請求。 ![](https://box.kancloud.cn/0d61c8957e64d4c6c9024b8898270d8b_876x502.png) 使用DELETE方法時,并不會真正的產生DELETE請求,而是先生成了一個叫OPTIONS的請求。 這個OPTIONS請求是怎么回事呢? 這個OPTIONS請求也叫Preflight請求,它是在發起DELETE真實請求時,先詢問服務器是否支持DELETE方法,再用響應頭信息的方式返回給瀏覽器,瀏覽器根據響應信息查看服務器是否支持DELETE方法,如果支持的話,就再發起真實的DELETE方法,不支持就報錯了。所以出現了上面的報錯信息。 我們先讓服務器支持DELETE方法,再來嘗試新的請求。 ``` location / { add_header 'Access-Control-Allow-Origin' 'http://localhost:3000'; add_header 'Access-Control-Allow-Methods' 'DELETE'; } ``` ![](https://box.kancloud.cn/f6ac5f2e45f08552e139a2fdfb235037_572x183.png) 果然,成功了。且發出了真正的DELETE請求。 ![](https://box.kancloud.cn/244fe9f13cb80a3021516426f9bd364c_677x477.png) 從前面的分析可以知道,`GET`,`POST`是不會發出Preflight請求的,而DELETE方法會,那還有什么情況下會呢?下面列舉出來: - 使用的方法不是GET, POST, 或 HEAD的任何一種 - Content-Type請求來不是下面任何一種 - application/x-www-form-urlencoded - multipart/form-data - text/plain - 不尋常的請求頭,例如不是下面的幾種: - Accept - Accept-Language - Content-Language - XMLHttpRequest的upload事件 值得注意的是,為了避免困惑,在`Access-Control-Allow-Methods`都會顯式地寫上`GET`,`POST`方法,即使它是默認就支持的。 ``` add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS, DELETE' ``` 除此之外,頻繁的Preflight請求可能會造成性能的消耗。我們可以用下面的方法處理一下: ``` add_header 'Access-Control-Max-Age' 1728000; add_header 'Content-Type' 'text/plain charset=UTF-8'; add_header 'Content-Length' 0; return 204; ``` `Access-Control-Max-Age`可以設置請求的過期時間,單位是秒(second)。另外,返回204的狀態碼,是返回一個空內容的返回,畢竟,Preflight請求只需要響應的頭部信息(Access-Control-Allow-Methods),并不需要響應內容的。 下一篇: [CORS進階之設置請求頭信息(三)](http://www.rails365.net/articles/cors-jin-jie-zhi-she-zhi-qing-qiu-tou-xin-xi-san) 完結。
                  <ruby id="bdb3f"></ruby>

                  <p id="bdb3f"><cite id="bdb3f"></cite></p>

                    <p id="bdb3f"><cite id="bdb3f"><th id="bdb3f"></th></cite></p><p id="bdb3f"></p>
                      <p id="bdb3f"><cite id="bdb3f"></cite></p>

                        <pre id="bdb3f"></pre>
                        <pre id="bdb3f"><del id="bdb3f"><thead id="bdb3f"></thead></del></pre>

                        <ruby id="bdb3f"><mark id="bdb3f"></mark></ruby><ruby id="bdb3f"></ruby>
                        <pre id="bdb3f"><pre id="bdb3f"><mark id="bdb3f"></mark></pre></pre><output id="bdb3f"></output><p id="bdb3f"></p><p id="bdb3f"></p>

                        <pre id="bdb3f"><del id="bdb3f"><progress id="bdb3f"></progress></del></pre>

                              <ruby id="bdb3f"></ruby>

                              哎呀哎呀视频在线观看