一、跨域
1. 什么是跨域？
跨域：指的是瀏覽器不能執行其他網站的腳本。它是由瀏覽器的同源策略造成的，是瀏覽器對javascript施加的安全限制（指一個域下的文檔或腳本試圖去請求另一個域下的資源，這里跨域是廣義的）
例如：a頁面想獲取b頁面資源，如果a、b頁面的協議、域名、端口、子域名不同，所進行的訪問行動都是跨域的，而瀏覽器為了安全問題一般都限制了跨域訪問，也就是不允許跨域請求資源。注意：跨域限制訪問，其實是瀏覽器的限制。理解這一點很重要！！！
廣義的跨域：
1.) 資源跳轉：A鏈接、重定向、表單提交2.) 資源嵌入：<link>、<script>、<img>、<frame>等dom標簽，還有樣式中background:url()、@font-face()等文件外鏈3.) 腳本請求：js發起的ajax請求、dom和js對象的跨域操作等其實我們通常所說的跨域是狹義的，是由瀏覽器同源策略限制的一類請求場景。
2. 什么是同源策略？
源策略/SOP（Same origin policy）是一種約定，由Netscape公司1995年引入瀏覽器，它是瀏覽器最核心也最基本的安全功能，如果缺少了同源策略，瀏覽器很容易受到XSS、CSFR等攻擊。所謂同源是指"協議+域名+端口"三者相同（其中有一個不同都會產生跨域），即便兩個不同的域名指向同一個ip地址，也非同源。
同源策略限制以下幾種行為：
1.) Cookie、LocalStorage 和 IndexDB 無法讀取2.) DOM 和 Js對象無法獲得3.) AJAX 請求不能發送
3. 常見跨域場景
3.跨域訪問示例
假設有兩個網站，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);
})})；
從錯誤信息可以看出以上出現了跨域問題！
4. 跨域解決方案
1、 通過jsonp跨域2、 document.domain + iframe跨域3、 location.hash + iframe4、 window.name + iframe跨域5、 postMessage跨域6、 跨域資源共享（CORS）7、 nginx代理跨域8、 nodejs中間件代理跨域9、 WebSocket協議跨域
5. nginx跨域解決方案
方案一：
先上圖：
首先我們用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項目和后端接口項目放到一個域中，這樣就不存在跨域問題，然后根據請求地址去請求不同服務器（真正干活的服務器）；
方案二：
（1）nginx配置解決iconfont跨域
瀏覽器跨域訪問js、css、img等常規靜態資源被同源策略許可，但iconfont字體文件(eot|otf|ttf|woff|svg)例外，此時可在nginx的靜態資源服務器中加入以下配置。
location /{
add_header Access-Control-Allow-Origin *;
}
（2） nginx反向代理接口跨域
跨域原理： 同源策略是瀏覽器的安全策略，不是HTTP協議的一部分。服務器端調用HTTP接口只是使用HTTP協議，不會執行JS腳本，不需要同源策略，也就不存在跨越問題。
實現思路：通過nginx配置一個代理服務器（域名與domain1相同，端口不同）做跳板機，反向代理訪問domain2接口，並且可以順便修改cookie中domain信息，方便當前域cookie寫入，實現跨域登錄。
nginx具體配置：
#proxy服務器
server {
listen 81;
server_name www.domain1.com;
location / {
proxy_pass http://www.domain2.com:8080; #反向代理
proxy_cookie_domain www.domain2.com www.domain1.com; #修改cookie里域名
index index.html index.htm;# 當用webpack-dev-server等中間件代理接口訪問nignx時，此時無瀏覽器參與，故沒有同源限制，下面的跨域配置可不啟用
add_header Access-Control-Allow-Origin http://www.domain1.com; #當前端只跨域不帶cookie時，可為*
add_header Access-Control-Allow-Credentials true;
}}
1.) 前端代碼示例：
var xhr = new XMLHttpRequest();// 前端開關：瀏覽器是否讀寫
cookiexhr.withCredentials = true;// 訪問nginx中的代理服務器xhr.open('get', 'http://www.domain1.com:81/?user=admin', true);xhr.send();
2.) Nodejs后台示例：
var http = require('http');
var server = http.createServer();
var qs = require('querystring');
server.on('request', function(req, res) {
var params = qs.parse(req.url.substring(2));
// 向前台寫cookie
res.writeHead(200, {
'Set-Cookie': 'l=a123456;Path=/;Domain=www.domain2.com;HttpOnly'
// HttpOnly:腳本無法讀取
});
res.write(JSON.stringify(params));
res.end();
});
server.listen('8080');
console.log('Server is running at port 8080...');
二、Https配置
HTTPS是一種通過計算機網絡進行安全通信的傳輸協議，經由HTTP進行通信，利用SSL/TLS建立全信道，加密數據包。HTTPS使用的主要目的是提供對網站服務器的身份認證，同時保護交換數據的隱私與完整性。
PS:TLS是傳輸層加密協議，前身是SSL協議，由網景公司1995年發布，有時候兩者不區分。
ca是ssl證書的簽發機構
ssl證書可以購買阿里雲免費證書
https://yundunnext.console.al...
下載nginx版證書，添加到服務器中，
配置nginx：
同時監聽80和443端口，當使用http訪問自動跳轉到https，根據if（$schema ==hhtp）完成
ssl_certificate配置證書路徑
ssl_certificate_key 配置key路徑
保存，重啟nginx。
啟動發現訪問 ailijie.top成功跳轉為 https://ailijie.top
使用https后站點內所有的請求都要使用https不然會被瀏覽器進行攔截。