前言

??之前心血來潮，感覺自己算法能力特別垃圾，馬上打開 LeetCode 去刷了一個(gè)周。后來發(fā)現(xiàn)，只去做不行，還要定期去總結(jié)。所以就想把總結(jié)的結(jié)果發(fā)布成博文。發(fā)布到哪個(gè)平臺呢？CSDN 還是博客園？知乎還是簡書？算了，要不然自己寫一個(gè)博客系統(tǒng)吧。所以又心血來潮，打算搞一個(gè)自己的博客系統(tǒng)，放到機(jī)器上跑。其實(shí)挺久之前，就對前端比較感興趣，但無奈一直沒有系統(tǒng)學(xué)習(xí)，也沒有時(shí)間經(jīng)驗(yàn)，所以前端打算用Vue實(shí)現(xiàn)，前后端分離去做，后端用 SpringCloud 去搞，邊搞邊學(xué)習(xí)，在實(shí)踐中遇到問題，在問題中進(jìn)行學(xué)習(xí)。

??說搞就搞，前后端搭起框架，后端簡單接口寫好，前端項(xiàng)目 init 完成，前后端打個(gè)招呼吧，這時(shí)候發(fā)現(xiàn)：前端向后端發(fā)請求的時(shí)候出現(xiàn)了跨域。前端發(fā)布在 localhost:8080 上，后端發(fā)布在 localhost:9090 上，端口不同，可不就是跨域么。

跨域的概念

跨域是指a頁面想獲取b頁面資源，如果a、b頁面的協(xié)議、域名、端口、子域名不同，所進(jìn)行的訪問行動(dòng)都是跨域的，而瀏覽器為了安全問題一般都限制了跨域訪問，也就是不允許跨域請求資源。注意：跨域限制訪問，其實(shí)是瀏覽器的限制。

前端代碼：

export default {
  data() {
    return {
      username: "",
      password: ""
    };
  },
  methods: {
    login() {
      http
        .post("http://localhost:9090/test/redis", {"ids":"ok"})
        .then(data => {
          console.log("res: ", data);
        })
        .catch(err => console.log(err));
    }
  }
};

此時(shí)瀏覽器報(bào)出異常：

跨域請求異常的提醒

也就是說，當(dāng)前后端不在同一個(gè)域中，無法直接發(fā)送請求。前言中所說的場景是因?yàn)槎丝诓煌瑢?dǎo)致的跨域。

跨域的調(diào)用

如何解決

目前的問題是在跨域，在網(wǎng)上找了一下解決方案：

• jsop
• nginx實(shí)現(xiàn)代理

??jsonp 只能用于get請求，后來就研究了一下 nginx 實(shí)現(xiàn)，實(shí)踐了一下，發(fā)現(xiàn)是可行的，在這里記錄一下當(dāng)時(shí)實(shí)踐的過程和原理。

Nginx實(shí)現(xiàn)跨域

代碼設(shè)置

nginx.conf 進(jìn)行前后端應(yīng)用的配置

server {
        listen       80;
        server_name  localhost;

        location / {
            proxy_pass  http://localhost:8080;      #設(shè)置前端請求代理url
        }

        location /api/ {                            #添加訪問目錄為/api的代理配置
            rewrite  ^/api/(.*)$ /$1 break;         #將請求過來的代理url中的 /api 過濾掉
            proxy_pass   http://localhost:9090;     #設(shè)置后端請求代理url
        }

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

前端代碼需要修改請求的url

export default {
  data() {
    return {
      username: "",
      password: ""
    };
  },
  methods: {
    login() {
      http
        .post("http://localhost/api/test2/redis", {"id":"ok"})
        .then(data => {
          console.log("res: ", data);
        })
        .catch(err => console.log(err));
    }
  }
};

原理說明

locahost/api/test2/redis 通過 nginx 代理的映射，真正到達(dá)后端的請求url 為 localhost:9090/test2/redis

nginx進(jìn)行代理