如何解決前端跨域問題

時間 2019-11-22

標籤如何解決前端問題简体版

原文原文鏈接

爲何會跨域?

跨域主要是瀏覽器限制的，瀏覽器要求請求的url地址與當前的頁面的url地址處於域名、端口號、協議一致，若是出現其中的一項不一致，則跨域。html

由於我如今作的項目是先後端分離的，因此會出現這個問題。前端

先說一下個人服務器環境：centos7 + nginx，假設個人前端項目部署在服務器的http://100.100.100.100:80上，然後端項目部署在http://100.100.100.100:8080上，那麼此時前端項目（80端口）請求服務器接口（8080端口）時，瀏覽器就會提示跨域，致使請求受限制。nginx

解決方式：後端

方法一：經過設置後端的cors容許跨域

這種方式比較簡單,須要配合後端實現,經過在後端設置cors容許跨域，能夠指定ip,也能夠用"*"容許所有. 如下是在koa2中容許跨域代碼（不一樣的服務器框架或語言的跨域配置相似）centos

app.use(cors({
  origin: function (ctx) {
    return "*";
  },
  exposeHeaders: ['WWW-Authenticate', 'Server-Authorization'],
  maxAge: 5,
  credentials: true,
  allowMethods: ['GET', 'POST', 'DELETE', 'PUT'],
  allowHeaders: ['Content-Type', 'Authorization', 'Accept', 'accesstoken'],
}))
複製代碼

方法二：經過JsonP

JsonP的原理大概就是，利用瀏覽器對script加載完自動執行的特新來實現的。api

好比前端有一段代碼：跨域

<script>
    function handle(data){
        console.log(data);
    }
</script>
複製代碼

假設服務器接口名爲 http://100.100.100.100/getData 該接口返回一個文件，文件內容爲：瀏覽器

handle('數據。數據。數據。');
複製代碼

那麼請看如下前端代碼：bash

<!DOCTYPE html>
<html>
<head>
<script>
    function handle(data){
        console.log(data);
    }               
</script> 
<script>
    var url = "http://100.100.100.100/getData";
    var script = document.createElement('script');
    script.setAttribute('src', url);
    document.getElementsByTagName('head')[0].appendChild(script); 
</script>
</head>
<body>
</body>
</html>

複製代碼

當第二個script裏的代碼執行完以後，第一個script裏的handle就會被調用，此時輸出'數據。數據。數據。'。服務器

採用JsonP的過程比較繁瑣，須要客戶端和服務器端兩端的同時配合，所以須要特別處理的接口可使用，通常傳統的後臺接口不會採用這種方式進行跨域。