Nginx跨域及Https配置

一、跨域

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 + iframe
4、 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不然会被浏览器进行拦截。