Nginx跨域及Https配置

拼搏现实的明天。 2022-10-05 05:46 335阅读 0赞

# **一、跨域** #

## **1.1. 什么是跨域？** ##

跨域：

**指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对javascript施加的安全限制（指一个域下的文档或脚本试图去请求另一个域下的资源，这里跨域是广义的）**

例如：a页面想获取b页面资源，如果a、b页面的协议、域名、端口、子域名不同，所进行的访问行动都是跨域的，而浏览器为了安全问题一般都限制了跨域访问，也就是不允许跨域请求资源。注意：跨域限制访问，其实是**浏览器的限制**。理解这一点很重要！！！

广义的跨域：

*  **`1.) 资源跳转：A链接、重定向、表单提交`**
 *  **`2.) 资源嵌入：<link>、<script>、<img>、<frame>等dom标签，还有样式中background:url()、@font-face()等文件外链`**
 *  **`3.) 脚本请求：js发起的ajax请求、dom和js对象的跨域操作等``其实我们通常所说的跨域是狭义的，是由浏览器同源策略限制的一类请求场景。`**

## **1.2. 什么是同源策略？** ##

源策略/SOP（Same origin policy）是一种约定，由Netscape公司1995年引入浏览器，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，浏览器很容易受到XSS、CSFR等攻击。所谓同源是指"协议+域名+端口"三者相同（`其中有一个不同都会产生跨域`），即便两个不同的域名指向同一个ip地址，也非同源。

同源策略限制以下几种行为：

1.) Cookie、LocalStorage 和 IndexDB 无法读取
    2.) DOM 和 Js对象无法获得
    3.) AJAX 请求不能发送

## **1.3. 常见跨域场景** ##

![72000e996efb4027f420f324e154e8c7.png][]

## 1.4.跨域访问示例 ##

假设有两个网站，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);
> 
>   \})\})；![dd46fafeeef6ba2c89c5836e39aae465.png][]

![3e03194666a18113c024f2fa0f26258b.png][]

从错误信息可以看出以上出现了跨域问题！

# 二**. 跨域解决方案** #

1、 通过jsonp跨域 2、 document.domain + iframe跨域 3、 location.hash + iframe 4、 window.name + iframe跨域 5、 postMessage跨域 6、 跨域资源共享（CORS） 7、 nginx代理跨域8、 nodejs中间件代理跨域 9、 WebSocket协议跨域

## **方案一：** ##

先上图：

![ccfc017f7aafd62bb9fe6b12093edfb1.png][]

首先我们用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：

![d70ca576efb3a11e3fece1d3a6775c08.png][]

同时监听80和443端口，当使用http访问自动跳转到https，根据if（$schema ==hhtp）完成

ssl\_certificate配置证书路径

ssl\_certificate\_key 配置key路径

保存，重启nginx。

启动发现访问 ailijie.top成功跳转为 https://ailijie.top

使用https后站点内所有的请求都要使用https不然会被浏览器进行拦截。

# 参考： #

[https://www.cnblogs.com/uestc2007/p/12191947.html][https_www.cnblogs.com_uestc2007_p_12191947.html]

[72000e996efb4027f420f324e154e8c7.png]: /images/20221005/d0c85756422e41c0bcd473f93147d873.png
[dd46fafeeef6ba2c89c5836e39aae465.png]: /images/20221005/f7ea6592b4eb465daeef493753fb05b8.png
[3e03194666a18113c024f2fa0f26258b.png]: /images/20221005/b67e7a4266f94501ae29112dfab3eecf.png
[ccfc017f7aafd62bb9fe6b12093edfb1.png]: /images/20221005/c4c8ec9b0dea42cabf5da4de8deb87c5.png
[d70ca576efb3a11e3fece1d3a6775c08.png]: /images/20221005/441999ad55f74662953419a296fbec01.png
[https_www.cnblogs.com_uestc2007_p_12191947.html]: https://www.cnblogs.com/uestc2007/p/12191947.html