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