2. 程式人生 > >前端使用 Nginx 反向代理徹底解決跨域問題

前端使用 Nginx 反向代理徹底解決跨域問題

阿新 • • 發佈：2019-01-10

一、前言

這裡寫圖片描述
由於身處於小團隊，作為後臺的，不得已參與到前端開發中。首先迎來的就是跨域的問題。
個人覺得使用 nginx 是一種較為簡單直接徹底的辦法

二、流程

1、請求後端資料失敗

這裡寫圖片描述
程式碼如下

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.1.0.min.js"
 
></script>
    <script type="text/javascript">
        function upd() {
            $.ajax({
                type: "get",
                url: "http://120.79.197.130:8530/spring/user/get",
                success: function(result) {
                    console.log(result);
                }
            });
        }
    
 
</script>

    <body>
        <!--獲取-->
        <button id="btn2" onclick="upd()">Get request 獲取</button>
    </body>

</html>

2、加入 nginx

1、在 conf/nginx.conf 中，很多都是預設配置，筆者把註釋去掉，添加了自己少量的配置

worker_processes  1;

events {
    worker_connections  1024;
}

http {
    include       mime.types;
    default_type  application/octet-stream;

    sendfile        on;

    keepalive_timeout  65
 
;

    server {
        listen       8888; # 任意
        server_name  localhost; 

        location / {
            root   html;
            index  index.html index.htm;
        }

        # 新加的
        location /spring {
            proxy_pass   http://120.79.197.130:8530; # 後端介面 IP:port
        }

        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }

    }

}

2、點選 這裡寫圖片描述開啟服務
3、修改程式碼上述 html 程式碼的 url

            $.ajax({
                type: "get",
                url: "/spring/user/get", // 注意連結
                success: function(result) {
                    console.log(result);
                }
            });

4、將程式碼檔案放入 nginx 的 html 資料夾中（可以把裡邊的其他 html 刪掉）
這裡寫圖片描述
如下
這裡寫圖片描述
5、基於 nginx 伺服器，訪問該 html 檔案，可以看到，跨域請求，成功訪問資料
這裡寫圖片描述

三、配置 HBuilder 內建伺服器為 nginx

問題來了，跨域請求雖然是成功了，但是每次編寫完 html，都要放到 nginx/html 下才能正常跨域請求，是不是覺得有點麻煩
像 Sublime 直接以 nginx/html 為工作環境即可
像 webstorm、HBuilder 都有內建伺服器，要怎麼破？
筆者主要使用 HBuilder，支援國產 ~，下面以 HBuilder 為例
1、點選 設定web 伺服器
這裡寫圖片描述
2、新建外接 web 伺服器
這裡寫圖片描述
內容可以如下示例：
這裡寫圖片描述
3、使用自己配置的伺服器取代預設的伺服器
這裡寫圖片描述
4、再以 nginx/html 為工作環境即可
最簡單方法：
① 匯入工程
這裡寫圖片描述
選擇 這裡寫圖片描述 再點選 這裡寫圖片描述
以 nginx/html 下的目錄
這裡寫圖片描述
點選完成即可

四、小結

至此， 沒有所謂的跨域問題，且前端的開發環境依舊 ~
其他的編譯器類似，不再多述

相關推薦

前端使用 Nginx 反向代理徹底解決跨域問題

一、前言 由於身處於小團隊，作為後臺的，不得已參與到前端開發中。首先迎來的就是跨域的問題。 個人覺得使用 nginx 是一種較為簡單直接徹底的辦法 二、流程 1、請求後端資料失敗 程式碼如下 <!DOCTYPE html>

nginx用反向代理機制解決跨域的問題

nginx nginx跨域 nginx反向代理 甘兵 什麽是跨域？使用js獲取數據時，涉及到的兩個url只要協議、域名、端口有任何一個不同，都被當作是不同的域，相互訪問就會有跨域問題。跨域，指的是瀏覽器不能執行其他網站的腳本。它是由瀏覽器的同源策略造成的，是瀏覽器施加的安全限制。所謂同源是指，

nginx反向代理請求域名,跨域問題

在使用nginx做方向代理，監聽A域名發起的請求轉向B域名，由於只是做了簡答的代理，導致專案反向代理後，專案發起的請求域名是代理後發起的域名，從而導致跨域問題，如下：server {listen 80;server_name *.a.cn;client_max_body_si

Mac下使用nginx反向代理伺服器解決資源跨域問題

使用homebrew來安裝nginx，開啟終端 1.  安裝homebrew包 ruby -e "$(curl-fsSL https://raw.githubusercontent.com/Homeb

vue專案中webpack配置代理，解決跨域問題

在config資料夾中的index.js檔案配置 主要是這句話 proxyTable: { //本地測試介面 '/': { target: 'http://xx.xx.xx.xx', changeOrigin: true, sec

vue本地代理（解決跨域問題）

本文只針對axios+vue/cil3.0 axios配置： const http = axios.create({ baseURL: process.env.NODE_ENV === 'production' ? 'http://www.xxxxx.com/': '', //這裡是關鍵

九種 “姿勢” 讓你徹底解決跨域問題

轉載自：https://segmentfault.com/a/1190000016653873   同源策略 同源策略/SOP（Same origin policy）是一種約定，由 Netscape 公司 1995 年引入瀏覽器，它是瀏覽器最核心也最基本的安全功能，如果缺少了同

徹底解決跨域問題

跨域問題，請求時可以訪問的，但只是獲取不到結果 網站跨域的五種方案  1、使用jsonp解決跨域（不推薦 因為只能支援get請求，不支援post請求） 2、設定響應頭允許跨域（可以推薦） 3、使用HttpClient進行轉發（不推薦，因為效率低，會發送兩次請求） 4、使用Nginx搭建AP

通過nodejs代理伺服器解決跨域問題

1、本段程式碼用於解決前後端分離過程中產生的跨域問題。原理上是使用代理轉發。使用nodejs語法編寫，需要執行在nodejs環境下。 2、使用方法       1、普通ajax請求的url需要改成程式碼中監聽的路由和埠。   

前後端分離nginx配置，同時解決跨域問題

背景 現在，web開發的前後端分離技術越來越火爆，由於最近的課程設計使用了前後端分離的方案，這裡就來記錄一下前後端分離的專案部署。這裡我們使用的前端框架是react，後臺使用ssm提供資料介面。 nginx nginx (engine x) 是一個高效能的

Vue.js代理設定解決跨域問題

當我們在使用vue.js進行專案開發時，因為我們可以本地以localhost:port（埠號）這樣形式啟動專案進行本地除錯，這個時候我們需要使用後端介面就會出現跨域問題，這是因為localhost和訪問域名不一致造成，在vue-cli使用的模板外掛中，就有解決這

後端Apache日誌獲取前端Nginx反向代理的真實IP地址

php檢視客戶訪問真實地址程式碼<?php function real_ip() { static $realip = NULL; if ($realip !== NULL) { return $realip; }

徹底解決跨域問題(五種解決跨域的方式)

跨域問題解決方案 最近自己寫了一個js元件，該js元件是提供給第三方使用的，而js元件中涉及了ajax請求，於是乎就出現了跨域請求問題。下面記錄一下自己的解決路程。 什麼是跨域 參考：跨域請求詳解 個人理解：我理解的跨域就是，兩個不同

後端Apache獲取前端Nginx反向代理的真實IP地址 （原創貼-轉載請註明出處）

====================說在前面的話==================== 環境：前段Nginx是反向代理伺服器；後端是Apache是WEB專案伺服器 目的：讓後端Apapche獲取訪問者真實IP地址，而非是反向代理地址 ==================

web前端面試-------同源策略和解決跨域問題的九種方法

什麼是同源策略？ 兩個頁面地址中的協議、域名和埠號一致，則表示同源。 同源策略的限制： 儲存在瀏覽器中的資料，如localStroage、Cooke和IndexedDB不能通過指令碼跨域訪問 不能通過指令碼操作不同域下的DOM 不能通過aja

gulp通過http-proxy-middleware開啟反向代理，實現跨域

怎麽 ajax 數組 研究 rip eat 服務器 .ajax net 原理同nginx開啟代理，只不過寫法不同，所以直接上代碼： 1、gulpfile.js配置代理服務器 gulp.task("domain3",function(){ webServer

使用nginx反向代理解決前端跨域問題

接口 tcp type rec access req start gin keepal 1. 首先去Nginx官網下載一個最新版本的Nginx，下載地址：http://nginx.org/en/download.html。我這裏下載的版本是：nginx/Windows-1.

nginx反向代理-解決前端跨域問題

1.定義 跨域是指a頁面想獲取b頁面資源，如果a、b頁面的協議、域名、埠、子域名不同，所進行的訪問行動都是跨域的，而瀏覽器為了安全問題一般都限制了跨域訪問，也就是不允許跨域請求資源。注意：跨域限制訪問，其實是瀏覽器的限制。理解這一點很重要！！！ 2.跨域訪問示例 假設有兩個網站，A網站部

利用nginx反向代理解決前端自測api跨域問題

      這幾天在做畢設，選了資料視覺化的課題，也順便學習一下前端的知識。作為一個後端工程師，我習慣了只提供api給前端這種高效的互動方式，但是自己做一整個專案的時候遇到麻煩了，那就是如何渲染資料的問題。（ps本人之前寫過html，css瞭解一些，js也能看懂的水

前端開發介面聯調--用nginx的反向代理機制解決前端跨域問題

轉載自：http://www.cnblogs.com/fengnovo/p/6230866.html       http://www.cnblogs.com/gabrielchen/p/5066120.html 前端開發用nginx代理伺服器解決伺服器跨域問題及跨域