2020 · 编程之旅-起点

七牛云是国内鲜有的免费提供对象存储服务的一个云服务商，和腾讯云，阿里云一样，但这两者收费，而七牛云不收费，当然也不是绝对免费，对象存储免费空间 10g，每个月还有 10g 的 cdn 加速服务（多数人基本用不完），超出部分额外收费，此外 https 收费。



我**之前**使用七牛云的主要原因，就是业内太多人推荐了，免费还带加速，存储博客图片好的不行，然而发生了如下的事情：

## 事情经过

让我不用七牛云的罪魁祸首其实是 Chrome 浏览器，先看一张图片。

![image-20201214211848873](https://img.kuizuo.cn/image-20201214211848873.png)

What？图片呢？第一时间毫不犹豫打开控制台查看问题所在，有这样几行报错

![image-20201214212056058](https://img.kuizuo.cn/image-20201214212056058.png)

关注第一行

```
Mixed Content: The page at '<URL>' was loaded over HTTPS, but requested an insecure element '<URL>'. This request was automatically upgraded to HTTPS, For more information see <URL>
```

翻译过来就是：网页混合内容:页面是通过 HTTPS 加载，但却请求一个不安全元素 HTTP。该请求被自动升级为 HTTPS，更多信息请参见。

管他啥意思，先百度，然后才了解到，在 Chrome 浏览器高版本中（具体多少忘了），如果当前站点是 https，那么会自动将页面请求的 http 升级为 https，也就是说，我当前站点是 https 协议，访问不了 http 的资源，然而这可坑惨我了，我的图片全都放在七牛云上，然而七牛云的 HTTPS 是收费的，那时候我也抱着白嫖的心态，去嫖了七牛云的对象存储来做图床，现在我将http://kzcode.cn 升级为https://kzcode.cn 的时候，就意味这我不能白嫖了？也就是出现了如上画面，然后又去相关了一些百度相关的知道，看看有没有解决办法，如下

- 使用其他浏览器

这个问题只有 Chrome 浏览器内才有，在 https 站点会将 http 请求自动升级为 https，在其他浏览器不会，上面的图片也会正常显示。

- 要么都用 HTTP，要么都用 HTTPS

http 站点去请求 https 资源会不安全，而 https 站点去请求 http 会自动升级为 https，而这没有很好的有效方法去让两者兼容。

## 选择

既然搜到解决办法后，我心想，这网站怎么能不上 HTTPS，怎么能让左上角的锁不安全呢。用了 HTTPS 是不可能回去的了，同时怎么能保证别人用的浏览器不是 Chrome 浏览器呢，于是毅然决然的将所有将图片升级为 HTTPS 了，然而在对比后各家的对象存储服务，我选择了腾讯云，先放一张比对图：

| 运营商 | 价格(元/GB)                                      | 活动                                                                   |
| ------ | ------------------------------------------------ | ---------------------------------------------------------------------- |
| 阿里云 | HTTP 0.24<br/>HTTPS 需要额外加一点请求费         | 无                                                                     |
| 腾讯云 | HTTP 和 HTTPS **统一 0.21**                      | 前 6 个月每个月送 20GB 国内流量                                        |
| 七牛云 | HTTP **0.24** (超出免费 10GB)<br/>HTTPS **0.28** | 每个月送 **10GB HTTP 流量** (国内外均可使用) 以及 5 万次动态加速请求数 |

可以看到如果你每个月的请求流量都在 10GB 以内，且不用 HTTPS，七牛云肯定是最好的选择，然而我目前的站点是需要 HTTPS 的，并且七牛的 HTTPS 费用高出其他两家，甚至可以说，用了 HTTPS，就没必要选择七牛云！一没优势，速度优化不到哪里去，二是你完全可以相信大厂，三是服务费用还比两者贵。同时我云服务器也是腾讯云的，肯定优先选择腾讯，于是把对象存储换为了腾讯云，早知道就一开始就直接用腾讯的对象存储服务，果然还是花钱实在，白嫖太麻烦了。

> 参考链接 [阿里云、腾讯云、七牛云 CDN 对比](https://blog.txzhou.com/website/compare-cdn.html)

## 最后

本文的标题并不是说七牛云不好，而是我所遇到的情形让我放弃了使用七牛云，相信你看完了上面所说的，能对你的网站有个存储有个明确的配置，你在哪买服务器了，还是在哪去买其他相关的业务，没必要花费时间去折腾，说到底还是花钱实在。并且价格实际上对一个小网站来说，已经是可以非常低了（当然还是有些人会想着白嫖）

总结下来其实就是，如果你的网站不准备挂 SSL 证书，也就是通过 http 请求访问，那么白嫖七牛云，没问题，好用，但如果你的网站一旦挂了 SSL 证书，我的建议是直接删了七牛云的对象存储。

为什么我不用七牛云

## Content-type

先看一条 HTTP 请求

```http
POST https://xxx.kuizuo.cn/v2/login HTTP/1.1
Host: xxx.kuizuo.cn
Connection: keep-alive
Content-Length: 121
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4280.88 Safari/537.36
// Content-Type: application/json;charset=UTF-8
Accept: application/json, text/plain, */*

{"username":"kuizuo","password":"a12345678"}
```

上面那个请求发送到我的服务器，服务器却接收到的是这样一串值

```json
{ "{\"username\":\"kuizuo\",\"password\":\"a12345678\"}": "" }
```

很显然，它把 json 格式解析成了 x-www-form-urlencoded。

一个很简单的登录请求，注意一个协议头`Content-Type`，它决定了你的数据发送到服务端上会是什么格式。

```
类型格式：type/subtype(;parameter)?
type 主类型，任意的字符串，如text，如果是*号代表所有；
subtype 子类型，任意的字符串，如html，如果是*号代表所有；
parameter 可选，一些参数，如Accept请求头的q参数， Content-Type的charset参数。
```

常见的媒体格式类型如下：

- text/html ： HTML 格式

- text/plain ：纯文本格式

- text/xml ： XML 格式

- image/gif ：gif 图片格式

- image/jpeg ：jpg 图片格式

- image/png：png 图片格式

  以 application 开头的媒体格式类型：

- application/xhtml+xml ：XHTML 格式

- application/xml ： XML 数据格式

- application/atom+xml ：Atom XML 聚合格式

- application/json ： JSON 数据格式

- application/pdf ：pdf 格式

- application/msword ： Word 文档格式

- application/octet-stream ： 二进制流数据（如常见的文件下载）

- application/x-www-form-urlencoded ： form 表单数据被编码为 key/value 格式（通过=与&拼接）发送到服务器（表单默认的提交数据的格式）格式如: username=kuizuo&password=a12345678

  另外一种常见的媒体格式是上传文件之时使用的：

- multipart/form-data ： 需要在表单中进行文件上传时，就需要使用该格式

实际上遇到最多的也就是 text/html，text/plain，application/json，application/x-www-form-urlencoded 这几个。

> 参考资料 [Http 请求中 Content-Type](https://www.cnblogs.com/klb561/p/10090540.html)

### 说说我那时候的情况

这是在我帮别人分析登录算法的时候，由于协议头中少添加了一个`Content-Type`，导致我发送的数据，服务端解析不了，收到了这样的响应

```json
{
  "code": 500001,
  "message": "亲，我们的系统目前忙碌中或无法回应，请将此问题回报给我们的客服人员。 错误代碼(68523)",
  "data": null
}
```

然而实际响应应该是这样的

```json
{ "code": 400020, "message": "密码错误", "data": "验证码错误" }
```

原因就是因为协议头没有添加`Content-Type: application/json;charset=UTF-8`所导致的。因为这个，坑了我近一个小时，还一直以为是数据错误，没想到仅仅只是少加了一些协议头导致的请求数据格式错误。

一个印象很深刻的教训，模拟 HTTP 请求的时候，一定不要吝啬补全协议头，不然坑的就是自己了。我已经给坑过两次了，所以在特意想借此记录一下，免得下次又是一番折腾。写个注意，醒目一点。

:::danger 发送的是 JSON 格式数据，切记一定要添加上协议头`Content-Type: application/json;charset=UTF-8`

:::

HTTP请求之Content-Type

## 前言

记录一下自己在 nodejs 中使用 http 请求库 axios 中的一些坑（针对 Cookie 操作）

不敢说和别人封装的 axios 相比有多好，但绝对是你能收获到 axios 的一些知识，话不多说，开始

## 封装

一般而言，很少有裸装使用 axios 的，就我涉及的项目来说，我都会将 axios 的 request 封装成一个函数使用，接着在 api 目录下，引用该文件。项目结构一般是这样的：

```
|-- src
	|-- api
		|-- user.js
		|-- goods.js
	|-- utils
		|-- request.js
```

#### request.js

```js
import axios from 'axios'

var instance = axios.create({
  baseURL: process.env.API, // node环境变量获取的Api地址
  withCredentials: true, // 跨域携带Cookies
  timeout: 5000,
})
// 设置请求拦截器
instance.interceptors.request.use(
  config => {
    // 在config可以添加自定义协议头 例如token
    config.headers['x-token'] = 'xxxxxxxx'

    return config
  },
  error => {
    Promise.error(error)
  },
)

instance.interceptors.response.use(
  response => {
    const res = response.data
    // 根据对应的业务代码 对返回数据进行处理

    return res
  },
  error => {
    const { response } = error
    // 状态码为4或5开头则会报错
    // 根据根据对应的错误,反馈给前端显示
    if (response) {
      if (response.status == 404) {
        console.log('请求资源路径不存在')
      }
      return Promise.reject(response)
    } else {
      // 断网......
    }
  },
)

export default instance
```

实际上，上面那样的封装就够了，相对于的业务代码就不补充了，如果你的宿主环境是浏览器的话，很多东西你就没必要在折腾的，甚至下面的文章都没必要看（不过还是推荐你看看，会有帮助的）。不过没完，再看看 api 里怎么使用的

#### api/user.js

```js
import request from '@/utils/request'

export function login(data) {
  return request({
    url: '/user/login',
    method: 'post',
    data,
  })
}

export function info() {
  return request({
    url: '/user/info',
    method: 'get',
  })
}

export function logout() {
  return request({
    url: '/user/logout',
    method: 'post',
  })
}
```

看来很简单，没错，就是这么简单，由于是运行在浏览器内的，所以像 cookies，headers 等等都没必要设置，浏览器会自行携带该有的设置，其实想设置也设置不了，主要就是浏览器内置跨域问题。[XMLHttpRequest](https://fetch.spec.whatwg.org/#concept-header-name)

就这？感觉你写的跟别人没什么区别啊

别急，下面才是重头戏。也是我为啥标题只写 axios，而不写 vue-axios 或者 axios 封装的原因。

## 踩坑 Cookies 获取与设置

### 浏览器

运行环境在浏览器中，axios 是无法设置与获取 cookie，获取不到 set-cookies 这个协议头的（即使服务器设置了也没用），先看代码与输出

```js
instance.interceptors.request.use(config => {
  config.headers['cookie'] = 'cookie=this_is_cookies;username=kuizuo;'
  console.log('config.headers', config.headers)
  return config
})

instance.interceptors.response.use(response => {
  console.log('response.headers', response.headers)
  return res
})
```

控制台结果：

![image-20201210060704240](https://img.kuizuo.cn/image-20201210060704240.png)

首先，就是圈的这个，浏览器是不许允许设置一些不安全的协议头，例如 Cookie，Orgin，Referer 等等，即便你看到控制台 config.headers 确实有刚刚设置 cookie，但我们输出的也只是 headers 对象，在 Network 中找到这个请求，也同样看不到 Cookie 设置的（这就不放图了）。

同样的，通过响应拦截器中输出的 headers 中也没有 set-cookies 这个字样。网络上很多都是说，添加这么一行代码 `withCredentials: true`，确实，但是没说到重点，都没讲述到怎么获取 cookies 的，因为在**浏览器环境中 axios 压根就获取不到 set-cookies 这个协议头**，实际上 axios 就没必要，因为浏览器会自行帮你获取服务器返回的 Cookies，并将其写入在 Storage 里的 Cookies 中，再下次请求的时候根据同源策略携带上对应的 Cookie。

![image-20201210061627824](https://img.kuizuo.cn/image-20201210061627824.png)

要获取也很简单，vue 中通过`js-cookie`模块即可，而在 electron 中通过`const { session } = require('electron').remote` （electron 可以设置允许跨域，好用）有关更多可以自行查看文档。

那我就是想要设置 Cookies，来跳过登录等等咋办，我的建议是别用浏览器来伪装 http 请求。跨域是浏览器内不可少的一部分，并且要允许跨域过于麻烦。有关跨域，我推一篇文章[10 种跨域解决方案（附终极大招）](https://juejin.cn/post/6844904126246027278)

<details open>
   <summary>完整封装代码</summary>

```js
import axios from 'axios'
import { MessageBox, Message } from 'element-ui'
import store from '@/store'
import { getToken } from '@/utils/auth'

const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API,
  withCredentials: true,
  timeout: 5000,
})

service.interceptors.request.use(
  config => {
    if (store.getters.token) {
      config.headers['x-token'] = getToken()
    }

    return config
  },
  error => {
    Message.error(error)
    return Promise.reject(error)
  },
)

service.interceptors.response.use(
  response => {
    const res = response.data
    if (res.code !== 200) {
      Message.error(res.msg || 'Error')

      return Promise.reject(new Error(res.msg || '未知错误'))
    } else {
      return res
    }
  },
  error => {
    if (error.response) {
      let res = error.response
      switch (res.status) {
        case 400:
          Message.error(res.msg || '非法请求')
          break
        case 401:
          MessageBox.alert('当前登录已过期，请重新登录', '提示', {
            confirmButtonText: '重新登录',
            type: 'warning',
          }).then(() => {
            store.dispatch('user/logout').then(() => {
              location.reload()
            })
          })
        case 403:
          Message.error(res.msg || '非法请求')
          router.push('/401')
        case 404:
          Message.error(res.msg || '请求资源不存在')
          break
        case 500:
          Message.error(res.msg || '服务器开小差啦')
          break
        default:
          Message.error(res.msg || res.statusText)
      }
    } else {
      Message.error(res.msg || '请检查网络连接状态')
    }

    return Promise.reject(error)
  },
)

export default service
```

</details>

### Nodejs

作为 nodejs 的主流 http 框架怎么能只用在浏览器上，nodejs 自然可以，不过 nodejs 需要配置的可就多了，在 nodejs 环境中，自然没有浏览器的同源策略，像上面设置不了的 Cookie，现在随便设置，先看看我是怎么封装的：

```js
import axios from 'axios'
import * as http from 'http'
import * as https from 'https'

export async function request(opt) {
  let { url, method = 'get', headers = {}, cookies, data = null } = opt

  headers['User-Agent'] =
    'Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/69.0.3497.100 Safari/537.36'
  headers['Referer'] = url

  if (typeof cookies === 'object') {
    headers['Cookie'] = Object.keys(cookies)
      .map(k => encodeURIComponent(k) + '=' + encodeURIComponent(cookies[k]))
      .join('; ')
  } else if (typeof cookies === 'string') {
    headers['Cookie'] = cookies
  }

  let options = {
    url: url,
    method: method,
    headers: headers,
    data: queryString.stringify(data),
    httpAgent: new http.Agent({ keepAlive: true }),
    httpsAgent: new https.Agent({
      keepAlive: true,
      rejectUnauthorized: false,
    }),
    timeout: 5000,
  }

  try {
    let res = await this.axios.request(options)

    return res
  } catch (e) {
    console.log(e)
    return e.message
  }
}
```

```js
// test.js
const request = require('./request');

function test() {
  let url = 'https://passport2.chaoxing.com/fanyalogin';
  let data = {
    fid: '-1',
    uname: '15212345678',
    password: 'a12345678',
    refer: 'http%253A%252F%252Fi.mooc.chaoxing.com',
    t: 'true',
  };
  let headers = {};
  let cookies = 'username=kuizuo;uid=123;';
  let res = await request({
    url: url,
    data,
    headers,
    cookies,
  });
  console.log('test -> res.headers', res.headers);
  return res.data;
}

test();
```

测试一下，顺便抓一下包，看看请求包

```http
GET /fanyalogin HTTP/1.1
Accept: application/json, text/plain, */*
User-Agent: Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/69.0.3497.100 Safari/537.36
Referer: https://passport2.chaoxing.com/fanyalogin
Cookie: username=kuizuo;uid=123;
Host: passport2.chaoxing.com
Connection: keep-alive
Content-Length: 100

....
```

有我们自定义的 Cookie，在看看响应的协议头

```js
test -> res.headers {
  server: 'Tengine',
  date: 'Thu, 10 Dec 2020 00:24:15 GMT',
  'content-type': 'text/html',
  'content-length': '1852',
  connection: 'keep-alive',
  vary: 'Accept-Encoding',
  'set-cookie': [
    'JSESSIONID=4365A6B9FD8E0CBADDBDD7E7DA468F7E; Path=/; HttpOnly',
    'route=b2eda164bddd148142a54809ef404926;Path=/'
  ],
  'accept-ranges': 'bytes',
  etag: 'W/"1852-1606444212000"',
}
```

同样能获取到 set-cookie，设置与获取都是这么 so easy ，不同于上面浏览器的配置。

这里我要说明一些东西，在封装代码中有个 httpAgent 与 httpsAgent，你可以字面翻译就是 http 代理，设置它用来干嘛呢，其中有这么个属性 `keepAlive: true` ，如果设置了协议头中的将会有 `Connection: keep-alive`，而不设置则 `Connection: close`，这里也不想过多说明 http 相关知识，如果只是请求一次,那么两者没有太大区别

然而如果我请求一次,过一会(几秒内)又要请求了,那么 keep-alive 一次连接就可以处理多个请求，而 close 则是一次请求后就断开，下次就需要再次连接。说白了就是快一点，而 close 需要不断连接，断开，自然而然就慢。一般来说设置 keep-alive 就对了。

其中在 httpsAgent 中，还有一个属性`rejectUnauthorized: false`，说简单点，就是不抛出验证错误，在抓 nodejs 包的时候，如果不通过设置代理服务器（Fiddler，Charles），而是通过网卡（HTTP Analyzer，Wireshark）就会抛出异常，一般就会出现这种错误。

```
Error: unable to verify the first certificate
```

然而问题就来了，服务端的返回的 set-cookie 该怎么保存。如果只是涉及客户端层面的，想写一个模拟 http 请求的，直接将获取到的 cookies 与原有的 cookie 合并即可。我那时候的代码就是这样：

```js
let newCookie = res.header['set-cookie']
  ? res.header['set-cookie']
      .map(a => {
        return a.split(';')[0]
      })
      .join('; ')
  : ''

// mergeCookie 就是将两者cookie 拼接而成
let newCookies = mergeCookie(cookies, newCookie)

res[cookie] = newCookies
return res
```

然后返回响应中携带 res.cookies 即可，下次请求的时候再将其在带上。

如果只是，利用 nodejs 来实现类似爬虫，模拟登录，然后利用登录后的 cookie，来获取用户信息。如果不希望手动处理 cookies 的话，我其实还是推荐一个 http 模块，superagent，做一些小爬虫和模拟请求挺好用的，就不做过多介绍了。不过由于 nestjs 中自带 axios 模块，加上需要转发 http 请求，于是我就自行封装了一个 axios。

## 总结

实际上，axios 会根据当前环境，来创建 xhr 对象（浏览器）还是 http 对象（nodejs），在我那时候都以为 axios 是两个共用的，初学 electron 的时候，一直卡在 http 请求的配置

```
  // `adapter` allows custom handling of requests which makes testing easier.
  // Return a promise and supply a valid response (see lib/adapters/README.md).
  adapter: function (config) {
    /* ... */
  },
```

在 axios 中也有这么一段配置，翻看了 lib/adapters 下目录我才瞬间醒悟过来，两者环境是不同的。

![image-20201210214055696](https://img.kuizuo.cn/image-20201210214055696.png)

就我使用而言，在浏览器环境下 axios 处理的特别好，允许设置拦截器处理请求与响应，但在 nodejs 下在处理模拟请求确实不如 Python 的 request 模块，奈何 axios 最大的便携就是能直接在浏览器中，尤大推荐的 http 请求库也是 axios。

实际上还涉及到了 nodejs 中转发请求的，再给自己留一个坑。

在写这篇文章的时候，我其实都没读过 axios 的源码，说实话，那时候遇到问题，就不应该愚昧的去搜索，去不断尝试，有时候直接通过翻看底层代码，可以一目了然自己所面临问题的解决方式。

node与浏览器中的cookie

## 云服务器

服务器说白就是全天 24 小时不停歇的运行一台电脑，同时分配一个公网 IP 给这个电脑，你只需要把你要的资源放置到这台电脑上，别人通过访问该 IP 就能访问到这台电脑的资源，比如你放一个网页部署在这台服务器上，别人访问 这个IP就能访问到网页的内容。

你可以根据需求来安装服务器的系统，这些在云服务厂商中都是可以选择的。

### 服务器的配置

一般来说，一些提供云服务器的厂商都会给新用户一个新用户价，差不多也就是 100 左右一年的云服务器,配置一般都是 2g 内存,1 核,1m 带宽,50g 硬盘说实话对于没有特殊需求的服务器够用了。而不是新用户的价格，这样的配置一个月差不多 70 元，算一下一年打折后 700 元，这还算便宜的了，服务器贵这很正常，全天不间断运行，电费，网费和一些服务费用，其实就已经非常值了。

其他几个配置没什么可说的，如果要说服务器哪个配置最贵的话，无疑就是带宽了。1M 的带宽理论上传速度为 128kB/s，也就是我从服务器中下载一个 10m 的软件，需要 80 秒，这还只是理论速度，我实测过平均速度不到 100kB/s。如果搭建网站的话 1m 有些慢，虽说一个页面一般都不会超过 100kb，但背后加载的图片 css js资源可就不只是kb大小了，用户访问网页就需要花费一定时间等待加载，体验非常不好。个人建议带宽5m起步，否则就不建议购买。

### 云服务器和轻量应用服务

关于服务器的选择很多人不知道云服务器和轻量应用服务的区别，这里两种服务器我都买过，且目前都在役。主要区别和优势请参考下表（腾讯云文档）

![](https://img.kuizuo.cn/image_CO_V_ghsyo.png)

更具体的可以查看对应云服务商的介绍

[阿里云ECS云服务器和轻量应用服务有什么区别及选择方法-阿里云开发者社区 (aliyun.com)](https://developer.aliyun.com/article/1023850?spm=5176.21213303.J_6704733920.7.432353c9DbykNf\&scm=20140722.S_community@@文章@@1023850._.ID_community@@文章@@1023850-RL_阿里云ecs云服务器和轻量应用服务有什么区别及选择方法-LOC_main-OR_ser-V_2-P0_0 "阿里云ECS云服务器和轻量应用服务有什么区别及选择方法-阿里云开发者社区 (aliyun.com)")

[轻量应用服务器 与云服务器 CVM 对比-产品简介-文档中心-腾讯云 (tencent.com)](https://cloud.tencent.com/document/product/1207/49819 "轻量应用服务器 与云服务器 CVM 对比-产品简介-文档中心-腾讯云 (tencent.com)")

**总结：买轻量应用服务器是最实惠的**

### github学生认证送服务器

如果你不想花钱买一个服务器的话，可以考试github学生认证，会送你一个服务器。具体可到官方中查看 [https://education.github.com/experiences/virtual\_event\_kit](https://education.github.com/experiences/virtual_event_kit "https://education.github.com/experiences/virtual_event_kit")

![](https://img.kuizuo.cn/image_Rsh8Y_TBfe.png)

### windows 和 Linus 服务器的区别

这里可能会说的不对，毕竟我接触服务器相关等配置也没太多时间，但是我觉得有必要说一下，我那时候用 windows 服务器的时候，只要通过 windows**专业版**（一定要专业版才能远程连接别人的电脑）自带的远程桌面（cmd 中输入`mstsc`即可），然后输入 ip 地址，接着在输入相应的账号密码即可，但有可能无法连接，原因是防火墙和 ip 白名单没有配置好，服务器不允许连接。

而对于 Linux，用的最多的就是宝塔面板了，但是连接不是通过 windows 远程桌面，而是通过像终端那样连接登录，我一般是用 Xshell 来连接。但是连接完就开始输入命令安装宝塔面板，然后会有对应的面板地址和登录宝塔面板的账号密码，只要访问给定的面板地址加上用户密码即可登录。像对应的界面如下

![image-20200918141519472](https://img.kuizuo.cn/image-20200918141519472.png "image-20200918141519472")

## 选择哪家云服务器厂商

目前市场上主要有阿里云和腾讯云的服务器，这两者的服务器质量和操作体验上都属于大厂级别。不分上下，都可以选择购买，不过最好有个原则，你域名在哪购买，服务器就买哪一家的，因为到时候备案是需要服务器才能备案的。

# 域名

正常来说你访问你一个网站肯定不是访问一个ip地址，而是一个域名，比方说访问kuizuo.cn，baidu.com。但其实访问域名就相当于访问这个ip，过程如下：首先访问域名会经过DNS解析，DNS（域名系统）会找到你要访问的域名所解析的ip，然后访问这个ip。

但有遗憾的地方就是很多时候想要注册自己想要的域名非常难，因为已经被别人现行注册了。比如我的现在的kuizuo.cn这个域名是从他人手里购买而来的。所以域名这东西请优先准备好，备案解析啥的完全不急，一年也就是几十块钱，但是你不先买就很有可能给别人先注册，到时候想买都没得买，要不然就要花大价格购买，因此也有很多人去做域名买卖的生意。

一般一个域名够用了，需要的话在域名解析中去添加域名的子域名（二级，三级等等），比如我的一些个人项目就是使用二级域名来访问的，这里我也就不在列举了。

### 为啥要备案

首先备案要提交负责人的身份信息（身份证正反，手持，人脸，手机号，住址等），记录你这个域名内的网站的负责人和单位，主要为了防止在网上从事非法的网站经营活动，打击不良互联网信息的传播，能给予警告和封禁。（网站备案只针对国内服务器）

总之不要去搞违规违法行为，天网恢恢疏而不漏，网警要找总归有方法。

### ICP 备案

9 月 3 号购买的腾讯云与域名，然后进行初步的服务器简单部署配置，第二天开始域名实名认证，接着实名后需要 3 天时间才可以进行开始域名备案，等了 3 天开始域名备案提交网站的用途信息等等，然后拍身份证，人脸，手持，接着到 9 月 9 日腾讯云服务器的客服打电话给我要我修改一些信息，比如网站详情写的不行，资料不全，过不了备案等等，然后修改重新提交一次，最终等待收到腾讯云助手的通知，直到 9 月 18 号，如下结果

![image-20200918113449612](https://img.kuizuo.cn/image-20200918113449612.png "image-20200918113449612")

至此 ICP 备案就搞定了，ICP 还算轻松，身份信息真实，来访电话及时接听，等就行了。

只要ICP 备案，就可以通过域名 [kuizuo.cn](https://kuizuo.cn "kuizuo.cn") 访问到我的个人博客。(当然前提需要到域名管理中的DNS解析添加)

![](https://img.kuizuo.cn/image_nuVA2RTh_b.png)

### 公安备案

但还有一个公安备案，虽说不是强制的，但一般都是建议去公安备案一下。我之前的域名kzcode.cn就有公安备案，但现在的kuizuo.cn 并没有。主要原因还是太过于繁琐，比ICP备案复杂多了。

首先需要登录 [http://www.beian.gov.cn](http://www.beian.gov.cn "http://www.beian.gov.cn") 注册并且登录填写的信息也比上面的多，如下图

![image-20201119191204222](https://img.kuizuo.cn/image-20201119191204222.png "image-20201119191204222")

填写资料折腾了半小时左右的时间，才提交上去，而且过了快两周后，我收到了如下的短信

> 【公安网站服务平台】尊敬的用户:您开办的网站(互联网技术文章分享:kzcode.cn)审核未通过，原因：网站信息检查有误，审核不通过，请尽快登录www\.beian.gov.cn网站，在草稿中修改并重新提交网站备案申请，如有疑问可在工作日（上午8:30-11:30、下午14:00-17:00）联系网警，联系电话：059xxxxxxxx，谢谢您的配合。

工作人员电话和我联系是说我户籍转了，需要在我转入地去申请，于是又重新提交改数据，反正就是照着腾讯云的帮助文档填写自己的个人信息，中途有几次就这么磨着磨着到了 11 月 17 号，短信收到了这一条

> 【公安网站服务平台】尊敬的用户:您的开办主体已经审核通过，如果存在自动关联的待备案或待认领网站，请尽快核对归属，进行新网站备案以及已备案网站认领的申请。如有疑问可在工作时间（周一至周五上午 9:00-12:00、下午 14:00-17:00）联系网警，联系电话：059xxxxxxxx，谢谢您的配合。

然而，我登录了网站却没有看到已备案的网站，于是联系工作人员 ，然后叫我重新提交一次，这次不到半小时就搞定，最终短信结果如下

> 【公安网站服务平台】尊敬的用户:您开办的网站(互联网技术文章分享:kzcode.cn)已经审核通过，请尽快登录www\.beian.gov.cn网站,下载备案号码，附在网站底部，如有疑问可在工作日（上午9:00-12:00、下午14:00-17:00）联系网警，联系电话：059xxxxxxxx，谢谢您的配合。

然后登录公安备案网站，查看备案结果如下图，帅的不谈！

![image-20201117152619474](https://img.kuizuo.cn/image-20201117152619474.png "image-20201117152619474")

### 悬挂备案号

如果上面都已经弄好了也别太高兴，要在网页源代码将公安联网备案信息放置在网页底部。简单的说完成两项备案后都需要在网站页面底部显示备案号，并指明转到链接。在我的个人博客页面最下方，就会看到如下图这样。

![image-20201117153209037](https://img.kuizuo.cn/image-20201117153209037.png "image-20201117153209037")

[工信部原文](http://www.gov.cn/gongbao/content/2005/content_93018.htm "工信部原文") 第十三条和第二十五条

> **第十三条** 非经营性互联网信息服务提供者应当在其网站开通时在主页底部的中央位置标明其备案编号，并在备案编号下方按要求链接信息产业部备案管理系统网址，供公众查询核对。

> **第二十五条** 违反本办法第十三条的规定，未在其备案编号下方链接信息产业部备案管理系统网址的，或未将备案电子验证标识放置在其网站指定目录下的，由住所所在地省通信管理局责令改正，并处5千元以上1万元以下罚款。

当然也有很多网站并没有这么做，具体还是需要看网站的性质，是否经营性网站。像个人博客这种，只需要悬挂一个ICP备案号即可，但对于绝大多数的国内网站是肯定悬挂公安备案，并且除了备案信息外，还有一堆相关证件，如营业执照，许可证，资格证等等，国内的网站监管非常严格的。