javascript如何解決跨域問題

這篇文章主要為大家分享javascript解決跨域問題的方法。文中還介紹了跨域的概念以及跨域的訪問示例，希望大家通過這篇文章能有所收獲。

1.什么是跨域？

跨域：指的是瀏覽器不能執行其他網站的腳本。它是由瀏覽器的同源策略造成的，是瀏覽器對javascript施加的安全限制。

例如：a頁面想獲取b頁面資源，如果a、b頁面的協議、域名、端口、子域名不同，所進行的訪問行動都是跨域的，而瀏覽器為了安全問題一般都限制了跨域訪問，也就是不允許跨域請求資源。注意：跨域限制訪問，其實是瀏覽器的限制。理解這一點很重要！！！

同源策略：是指協議，域名，端口都要相同，其中有一個不同都會產生跨域；

2.跨域訪問示例

假設有兩個網站，A網站部署在：http://localhost:81 即本地ip端口81上；

B網站部署在：http://localhost:82 即本地ip端口82上。現在A網站的頁面想去訪問B網站的信息，A網站頁面的代碼如下（這里使用jquery的異步請求）

$(function (){

$.get("http://localhost:82/api/values", {},function (result) {

$("#show").html(result);

})})；

從錯誤信息可以看出以上出現了跨域問題！

3.如何解決跨域問題？

由之前的介紹我們已經知道錯誤的原因，既然跨域會產生問題，那么我們就不跨域不就完了嘛！！！

先上圖：

首先我們用nginx作為代理服務器和用戶交互，這樣用戶就只需要在80端口上進行交互就可以了，這樣就避免了跨域問題，因為我們都是在80端口上進行交互的；

下面我們看一下利用nginx作為反向代理的具體配置：

server {
        listen      80; #監聽80端口，可以改成其他端口
        server_name  localhost; # 當前服務的域名
        #charset koi8-r;
        #access_log  logs/host.access.log  main;
        location / {
            proxy_pass http://localhost:81;
            proxy_redirect default;
        }
location /apis { #添加訪問目錄為/apis的代理配置
rewrite  ^/apis/(.*)$ /$1 break;
proxy_pass  http://localhost:82;
  }
#以下配置省略

1.當用戶發送localhost:80/時會被nginx轉發到http://localhost:81服務；

2.當界面請求接口數據時，只要以/apis 為開頭，就會被nginx轉發到后端接口服務器上；

總結：nginx實現跨域的原理，實際就是把web項目和后端接口項目放到一個域中，這樣就不存在跨域問題，然后根據請求地址去請求不同服務器（真正干活的服務器）；

看完這篇文章，你能夠獨立解決javascript解決跨域問題了嗎？如果還想學到更多技能或想了解更多相關內容，歡迎關注億速云行業資訊頻道，感謝各位的閱讀。