在進行靜態頁面開發時,Vue類型的應用,會需要我們調用一些接口,但接口極可能是跨域,然后瀏覽器就會報cross-origin問題不給調。解決這個問題的辦法就是把瀏覽器設為忽略安全問題,設置--disable-web-security。但這種方式開發PC頁面是沒問題的,若是移動端頁面就解決不了了。所以針對這種情況我們應該使用Nginx轉發請求。把跨域的接口寫成調本域的接口,然后將這些接口轉發到真正的請求地址就可以了。
具體解決案例如下:
加入在開發一個Vue應用。
以前調試頁面是:http://192.168.1.100:8080/
請求的接口是:http://ni.hao.sao/api/get/info
步驟一:
把請求接口改為:http://192.168.1.100:8080/api/get/info(這樣就解決了跨域問題)。
步驟二:
把Nginx安裝好后,去到/usr/local/etc/nginx/目錄(Mac下的),修改nginx.conf文件。
步驟三:
把server配置注釋掉。在下面增加如下代碼:
server{
listen 8888;
server_name 192.168.1.100;
location /{
proxy_pass http://192.168.1.100:8080;
}
location /api{
proxy_pass http://ni.hao.sao/api;
}
}
保存后,啟動Nginx。
步驟四:
訪問:http://192.168.1.100:8888/,最后可以發現問題就圓滿解決了。