跨域問題
解決方案
//設置跨域請求
app.all('*', function (req, res, next) {
res.header("Access-Control-Allow-Origin", "*");
res.header('Access-Control-Allow-Headers', 'Content-Type, Content-Length, Authorization, Accept, X-Requested-With , yourHeaderFeild');
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();
});
完整代碼
var express = require('express');
var md5 = require('js-md5');
var app = express();
var bodyParser = require('body-parser');
app.use(bodyParser.json({
limit: '1mb'
}));
app.use(bodyParser.urlencoded({
limit: '1mb',
extended: true
}));
var DatabaseOperation = require('./connection');
//引用bodyParser
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({
extended: true
}));
//設置跨域請求
app.all('*', function (req, res, next) {
res.header("Access-Control-Allow-Origin", "*");
res.header('Access-Control-Allow-Headers', 'Content-Type, Content-Length, Authorization, Accept, X-Requested-With , yourHeaderFeild');
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();
});
//用戶註冊
app.get('/api/user/register', function (req, res) {
DatabaseOperation.select('user', {
"username": req.query.username,
}, function (result) {
if (result.length > 0) {
result = {
code: '1001'
}
res.json(result);
} else {
DatabaseOperation.insert('user', [{
"username": req.query.username,
"password": md5(req.query.password)
}], function (result) {
res.json(result)
});
}
});
});
const port = 8080;
app.listen(port, () => {
console.log('Express server listening on port ' + port);
});
connection.js
知識點
接下來了解一下響應頭是什麼（只說明上邊的幾個，其他自行了解）：
上邊的設置，在前端請求後端接口的時候，就會用到：
Access-Control-Allow-Headers:Content-Type, Content-Length, Authorization, Accept, X-Requested-With , yourHeaderFeild ：響應首部，用於預檢請求中，代表將會在正式請求的Access-Control-Expose-Headers 字段中出現的首部信息。
其中：
Content-Type： 實體頭部用於指示資源的MIME類型 media type 。
在響應中，Content-Type標頭告訴客戶端實際返回的內容的內容類型。瀏覽器會在某些情況下進行MIME查找，並不一定遵循此標題的值; 爲了防止這種行爲，可以將標題 X-Content-Type-Options 設置爲 nosnif
Authorization ：請求頭含有服務器用於驗證用戶代理身份的憑證。
Accept ：請求頭用來告知客戶端可以處理的內容類型
Access-Control-Allow-Origin:* ： 響應頭指定了該響應的資源是否被允許與給定的origin共享，對於不需具備憑證（credentials）的請求，服務器會以“*”作爲通配符，從而允許所有域都具有訪問資源的權限。或者也可以指定進行限制
Content-Length :74 : 表明了實體主體部分的大小（單位是字節）
Access-Control-Allow-Methods：PUT,POST,GET,DELETE,OPTIONS：服務器端允許的請求方式，常用get、post
Date: 其中包含了報文創建的日期和時間。格式：
Date: <day-name>, <day> <month> <year> <hour>:<minute>:<second> GMT
<day-name>
"Mon", "Tue", "Wed", "Thu", "Fri", "Sat", 或 "Sun" 之一 （區分大小寫）。
<day>
2位數字表示天數，例如， "04" 或 "23"。
<month>
"Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec" 之一（區分大小寫）。
<year>
4位數字表示年份，例如， "1990" 或 "2016"。
<hour>
2位數字表示小時數，例如， "09" 或 "23"。
<minute>
2位數字表示分鐘數，例如， "04" 或 "59"。
<second>
2位數字表示秒數，例如， "04" 或 "59"。
GMT
格林尼治標準時間。 在HTTP協議中，時間都是用格林尼治標準時間來表示的，而不是本地時間。
Content-Type:application/json; charset=utf-8： 說明實體內對象的媒體類型。
HTTP響應頭是資源的特定版本的標識符。這可以讓緩存更高效，並節省帶寬，因爲如果內容沒有改變，Web服務器不需要發送完整的響應。而如果內容發生了變化，使用ETag有助於防止資源的同時更新相互覆蓋（“空中碰撞”）。
ETag：如果給定URL中的資源更改，則一定要生成新的Etag值。 因此Etags類似於指紋，也可能被某些服務器用於跟蹤。 比較etags能快速確定此資源是否變化，但也可能被跟蹤服務器永久存留。
X-Powered-By: 3.2.1 : 這個查了半天沒找到一個合理的解釋，出於安全考慮一般會隱藏，不過使用express會自動暴露，於是就手動修改：
默認：
默認暴露我們使用的框架是express
這樣隱藏掉：
res.header("X-Powered-By", ' 3.2.1')
