Express+NodeJS搭建服务器后台

Express+NodeJS搭建阿里云 ubuntu 后台

Express+NodeJS CORS跨域问题

本人开发一个个人博客系统，对用户和博客进行增删改查，前后端分离开发。

• 前端用vue2.0开发，调用axios进行接口请求。
• 后端用Express、NodeJS、mongodb进行数据响应和存储。

1、简单的安装node.js、express

用express官方教程进行新建：
app.js

    const express = require('express')
    const app = express()
    
    app.get('/', (req, res) => res.send('Hello World!'))
    
    app.listen(3000, () => console.log('Example app listening on port 3000!'))

然后用浏览器进行访问测试,记得去阿里云后台开放3000端口：

成功完成响应。之后就可以不断完善app.js的业务代码。

2、cors跨域坑点

CORS是一个W3C标准，全称是"跨域资源共享"（Cross-origin resource sharing）。
它允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。

怎么算跨域
当一个资源从与该资源本身所在的服务器不同的域或端口不同的域或不同的端口请求一个资源时，资源会发起一个跨域 HTTP 请求。
比如，站点 http://domain-a.com 的某 HTML 页面通过 的 src 请求 http://domain-b.com/image.jpg。网络上的许多页面都会加载来自不同域的CSS样式表，图像和脚本等资源。
详细的描述戳这里

问题1：

Access to XMLHttpRequest at 'http://39.105.145.102:3000/api/essayList' 
from origin 'http://localhost:8080' has been blocked by CORS policy: 
No 'Access-Control-Allow-Origin' header is present on the requested resource.

原因：

当前端配置请求头时, 后端需要配置Access-Control-Allow-Headers为对应的请求头集合

解决：

后端端 app.js

//设置跨域访问
app.all('*', function(req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Headers", "X-Requested-With,Content-Type,Access-Token");
  res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");
  res.header("X-Powered-By",' 3.2.1')
  res.header("Content-Type", "application/json;charset=utf-8");
  next();
});

res.header("Access-Control-Allow-Headers", "X-Requested-With,Content-Type,Access-Token");

这个Allow-Headers里面的，Access-Token，也是一个小坑点。具体报错忘了。

问题2：

Access to XMLHttpRequest at 'http://127.0.0.1:8081/getInfo?t=1545899934853' 
from origin 'http://localhost:8080' has been blocked by CORS policy:
 Response to preflight request doesn't pass access control check: 
 The value of the 'Access-Control-Allow-Credentials' header in the response is '' 
 which must be 'true' when the request's credentials mode is 'include'. 
 The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.

原因：

当配置withCredentials=true时, 后端需配置Access-Control-Allow-Credentials

解决：

后端端 app.js 配置Access-Control-Allow-Credentials

问题3：

The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' 
when the request's credentials mode is 'include'. The credentials mode of requests initiated 
by the XMLHttpRequest is controlled by the withCredentials attribute.

原因：

当前端配置withCredentials=true时, 后端配置Access-Control-Allow-Origin不能为*, 必须是相应地址

解决：

前端 api.js

import axios from 'axios'
// axios配置
axios.defaults.withCredentials = false;

我的最后完成是：

• 前端withCredentials=false
• 后端的Access-Control-Allow-Origin为
• 后端不配置Access-Control-Allow-Credentials

这样浏览器就不报错了。

欢迎访问个人小博客网站：www.dayy.xyz

推荐工具：
pm2

• http://pm2.keymetrics.io/docs/usage/pm2-doc-single-page/
• https://juejin.im/post/5be406705188256dbb5176f9

3、参考文章：

跨域资源共享 CORS 详解：http://www.ruanyifeng.com/blog/2016/04/cors.html

NodeJS+Express遇到的跨域问题：https://segmentfault.com/a/1190000010412205

CORS跨域：https://juejin.im/post/5c2490ba6fb9a049ff4e2eca