一、跨域
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不然会被浏览器进行拦截。