跨域開發的幾種解決方案

做者：顏亦浠@毛豆前端

本地開發過程當中，最常遇到的就是出現跨域，沒法請求的問題。如何解決在開發中遇到的跨域問題，今天整理了4種解決方法，供你們參考。

1、何爲跨域

跨域出於瀏覽器的同源策略的限制，瀏覽器自己會限制跨域請求（嚴格來講，只是限制跨域的讀操做）。那麼何爲跨域呢?非同源請求均爲跨域，即:若是兩個請求的協議、域名、端口號只要有一個不一樣，即爲非同源即爲跨域。

2、常看法決跨域方案

通常多用於本地自測或者先後端開發部署均爲分離的狀況

一、webpack的proxyTable方案

在通常項目中都會有webpack對應的開發環境的配置文件：webpack.dev.js，在配置項中加入ProxyTable的配置項便可：

proxy: {
          '/api': {
          changeOrigin: true,
          target: 'http://******.*****.com',
    }
}
複製代碼

若是先後端前綴不匹配或者後端前綴不統一的狀況，能夠增長pathRewrite屬性來統一：

proxy: {
            '/EntryApp': {
              changeOrigin: true,
              target: 'http://******.*******.com',
              pathRewrite: {"^/EntryApp": "/EntryApp"}
        },
    }
複製代碼

proxyTable實現跨域可能存在的問題：

1.cookie丟失,接口沒法訪問

2.post請求報403錯

二、Switchhosts工具

SwitchHosts是一個管理、快速切換Hosts小工具，軟件開源，能夠實現一鍵切換Hosts配置。SwitchHosts須要管理本機的ip和端口的映射，因此須要以管理員身份運行。

打開SwitchHosts以後,須要在Myhost當中配置對應的映射，當左手邊處於打開狀態的時候，文件是處於只讀的狀態,須要編輯的話,就須要讓文件處於關閉狀態，不一樣環境還能夠分文件配置，直接照下圖配置便可：

SwitchHosts使用中可能會遇到的問題：

1.端口號默認爲80，若是不是，須要配置上對應的端口號

2.瀏覽器會有先考慮代理工具的代理。

三、Uuaper

uuaper是百度提供的一款基於nodejs，用於解決前端跨域問題的工具。具體的安裝與配置能夠去npm官網查找Uuaper,使用中須要結合nodejs，並須要具備自動認證功能：

var express = require('express');
var app = express();
 
var uuaper = require('uuaper');
    app.use('/api', new uuaper({
        target: 'http://xxx.xxx.com/',
        debug: true,
        auth: {
        server: 'http://xxx.baidu.com/login?',
        username: 'xxx',
        password: 'xxx',
    }
}));
複製代碼

四、Nginx

Nginx是一個免費的，開源的高性能的HTTP和反向代理服務器。

一般，線上先後端分開部署時，用nginx比較多。

nginx.conf是主配置文件，有若干個部分組成，每一部分都用{}區分。主要包括:

• main：nginx的全局配置，對全局生效
• events：影響nginx服務器或與用戶的網絡鏈接
• http：能夠嵌套多個server,配置代理，緩存，日誌等
• server：配置虛擬主機的相關參數，一個http能夠有多個server

nginx解決跨域的基本方法是在sever中配置proxy_pass:

// 前端服務的域名爲 fe.**.com
// 後端服務的域名爲 dev.**.com
server {
    listen: 80,
    server_name: fe.**.com,
    location / {
         proxy_pass dev.**.com
    }
}
複製代碼

根據實際需求，還能夠添加一些其餘的指令，好比：

• proxy_connect_timeout：nginx從接受請求至鏈接到上游服務器的最長等待時間
• proxy_cookie_domain：替代上游服務器的set_cookie頭的domain屬性
• proxy_cookie_path：替代上游服務器的set_cookie頭的path
• proxy_set_header：重寫發送到上游服務器頭的內容，也能夠經過將某個頭部的值設置爲空字符串，而不發送某個頭部的方式發放實現