node+express+vue項目部署到服務器，Nginx設置跨域

要一個人寫前台和后台就是一把辛酸淚，跨域弄得我頭大，寫了一個node+express+vue的前后台分離項目，部署到服務器出現跨域問題，找了好多資料，終於解決這個心頭大患了，哈哈哈哈哈

一、打包前端及放到服務器上面

我的前端是用Vue寫的，然后打包，把項目放到tomcat/webapps/ROOT/文件夾下面，我新建了一個文件夾來存放node寫的后台代碼，如下圖express存放的就是我的node代碼

二、啟動后台，前台訪問

然后我啟動node，訪問前端IP時出現了跨域的問題，如下圖

原因：

　　1.前端發出的請求附帶身份驗證（withCredentials: true），意思是是否支持發送cookie憑證信息的字段，而后端的Access-Control-Allow-Origin為 ‘*’時，請求會失敗，因為在options預請求的時候會被攔截下來，而在最開始，這兩者我都占據了，所以寫下來，防止自己下次再犯相同的錯誤。

結果報了以下圖的錯誤，大概意思說

在預請求的時候失敗了，當請求證書的模式為‘include’時，Access-Control-Allow-Origin不能為‘*’，這個證書模式初始化是通過ajax的widthCredentials屬性控制的

　　

找了好久的資料，終於解決了，請看我緩緩道來~

解決方法：

1. 方法一

前端請求頭的withCredentials設置為false

后端Access-Control-Allow-Origin可以設置為‘*’，不用進行身份過濾

2. 方法二

前台的withCredentials：true或者后台的Access-Control-Allow-Credentials設置為字符串true時，Access-Control-Allow-Origin不可以設置為‘*’，要設置為我請求的域名即可

即在node項目的app.js文件加入以下代碼，就成功解決了跨域的問題

app.all('*',function(req,res,next){
      res.header("Access-Control-Allow-Credentials", 'true');
  res.header("Access-Control-Allow-Origin", req.headers.origin);
  res.header('Access-Control-Allow-Headers', 'Content-type, usernme, token');
  res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS,PATCH");
  res.header("X-Powered-By", ' 3.2.1')
console.log(res.header().method,'res-----------------------------')
//res.send(res.header())
  // res.header("Content-Type", "application/json;charset=utf-8");
        next();    
})

最近在弄小程序  ，可是小程序打包到服務器請求必須是加密請求，就是https，可是我的服務器是http的   ，我又去阿里雲免費領取了一個ssl

一、在阿里雲上面注冊免費領取SSL證書

 

 

 二、按照順序就可以領取到免費證書

 

 三、審核通過后下載證書

 

 四、配置Nginx

在nginx.conf同目錄下創建cert文件夾, 並把下載壓縮包中的key和pem文件上傳到的cert文件夾下，我的Nginx路徑是如下圖

 

五、編輯 $ vim /usr/local/nginx/conf/nginx.conf，加入以下代碼

#以下屬性中，以ssl開頭的屬性表示與證書配置有關。
server {
    listen 443 ssl;
    #配置HTTPS的默認訪問端口為443。
    #如果未在此處配置HTTPS的默認訪問端口，可能會造成Nginx無法啟動。
    #如果您使用Nginx 1.15.0及以上版本，請使用listen 443 ssl代替listen 443和ssl on。
    server_name yourdomain.com; #需要將yourdomain.com替換成證書綁定的域名。
    root html;
    index index.html index.htm;
    ssl_certificate cert/cert-file-name.pem;  #需要將cert-file-name.pem替換成已上傳的證書文件的名稱。
    ssl_certificate_key cert/cert-file-name.key; #需要將cert-file-name.key替換成已上傳的證書密鑰文件的名稱。
    ssl_session_timeout 5m;
    ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;
    #表示使用的加密套件的類型。
    ssl_protocols TLSv1 TLSv1.1 TLSv1.2; #表示使用的TLS協議的類型。
    ssl_prefer_server_ciphers on;
    location / {
        root html;  #站點目錄。
        index index.html index.htm;
    }
}

我的配置如下圖

 

 

 

 六、重啟Nginx $ /usr/local/nginx/sbin/nginx -s reload，可能會報以下錯誤，這個報錯的意思是缺失http_ssl_module模塊，編譯的時候帶上--with-http_ssl_module就可以了，操作步驟如下

 

#切換到Nginx的源碼包，這里我的路徑如下
$ cd  /home/pan/nginx-1.16.1
#查看Nginx原有模塊
$ /usr/local/nginx/sbin/nginx -V
#在configure arguments:后面顯示的原有的configure參數如下：，也可以#沒有參數
configure arguments: 
#我們的新配置信息就應該這樣寫
$ ./configure --prefix=/usr/local/nginx --with-http_stub_status_module --with-http_ssl_module
#運行以上命令，等待執行完成，完成后運行以下命令，不用make install，否則會覆蓋安裝
$ make
#備份以前已經安裝好的Nginx
$ cp /usr/local/nginx/sbin/nginx /usr/local/nginx/sbin/nginx.bak
#停掉nginx
$ /usr/local/nginx/sbin/nginx -s stop
#然后將剛剛編譯好的nginx覆蓋現在的nginx
$ cp ./objs/nginx /usr/local/nginx/sbin/
#啟動nginx
$ /usr/local/nginx/sbin/nginx -s reload
#通過命令查看是否已經添加成功
$ /usr/local/nginx/sbin/nginx -V