用 Nokitjs 处理前端开辟中的跨域题目

2024年4月20日 136次阅读 来源: Houfeng

题目

在开辟一些「单页运用」时，平常会运用 Ajax 和服务器通信，比方 RESTful API，平常「前端」和「服务端 API」多是有差别职员在担任，也不在同一个工程下，那末开辟历程当中就可能会碰到跨域的题目，比方 Chrome 会在 console 中看到如许的毛病音讯:

XMLHttpRequest cannot load http://google.com/. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://run.jsbin.io' is therefore not allowed access.

浏览器由于平安缘由，有「同源战略」不许可「跨域」，偶然也会给开辟历程带来一点点小贫苦。

罕见要领

1. Access-Control-Allow-Origin

如今主流浏览器都支撑，经由过程在服务器的相应头信息中增加 Access-Control-Allow-Origin 以声明许可来自那些「域」的跨域要求，比方:

Access-Control-Allow-Origin: xxx.xyz

也能够许可任何泉源的跨域要求

Access-Control-Allow-Origin: *

很少有场景必须要在「临盆环境」运用 *，如果开辟环境运用 *，那末在布置到临盆环境时，为了平安启见，不管手动照样自动的体式格局，都须要换成「特定的域」

当然在开辟环境也可指定特定的「域」，如上边的 xxx.xyz，那开辟历程当中就须要每一个开辟职员增加 host 设置，以下:

127.0.0.1 xxx.xyz
1. nginx 反向代办

用代办的体式格局处理的跨域题目，就不要增加什么「相应头」了，用 nginx 搭建一个「用于开辟」的 WebServer，然后，我们能够把某些 URL 转发到「目的地点」，然后前端用 ajax 要求同域下的地点，如许天然就不存在「跨域题目」了，nginx 设置约莫以下：

...
location /api/ {
    rewrite  ^/api/(.*)  /$1 break;
    ...
} 
...

这个体式格局，须要让每一个前端开辟职员装置并设置 nginx，虽然能够恰好进修 nginx，却照样稍显贫苦。

用 Nokitjs 处理题目

Nokitjs 是一个「A Web development framework」，和 express/koa/hapi 等框架相似，用于开辟「Web 运用或网站」，这里不去比较各个框架的好坏，而是去处理「跨域」题目。

Nokitjs 供应了「敕令行东西」，在终端中直接运用「Nokit CLI」须要全局装置 Nokit:

npm install nokitjs -g

Nokit CLI 平常用于启动「基于 Nokit 开辟的运用」，同时它也能在「指定的目次」启动一个「静态 WebServer」，以下:

nokit start [端口] [运用目次省略时为当前目次] [别的选项]

「别的选项」中有一个 -pulibc 选项，能够指定「静态资本目次」，以下敕令，将在当前目次启一个「静态 WebServer」

npm start 8000 -public=./

怎样处理跨域题目？，还须要一个插件 nokit-filter-proxy，接下来用一个实例申明，如果我们有一个工程，构造以下:

运用目次
├── dist
├── package.json
└── src

dist 是「构建东西」Build 的目的目次，src 是源码目次，package.json 是 NPM 包设置文件。

装置 nokitjs 和 nokit-filter-proxy 并保存到 devDependencies

npm install nokitjs nokit-filter-proxy --save-dev

设置 package.json 的 scripts，以下

...
"scripts": {
    "start": "nokit start 8000 -public=./dist",
    "stop": "nokit stop",
    "restart": "npm stop && npm start",
    ...
}
...

如今，「不须要全局装置」 nokitjs，在「运用目次」实行：

npm start

即可启动一个「静态 WebServer」，将会看到以下提醒：

[Nokit][L]: Starting...
[Nokit][L]: The server on "localhost:8000" started

就能够在浏览器中接见 http://localhost:8000 了。

然后设置 nokit-filter-proxy，在「运用目次」新建一个文件 config.json，写入以下内容：

{
    "filters": {
        "^/": "nokit-filter-proxy"
     },
     "proxy": {
        "rules": {
          "^/api/(.*)": "http://xxx.xyz/"
        }
     }
}

如上设置，起首注册了 nokit-filter-proxy，然后增加了一条转发划定规矩，将一切 /api 开首的 URL 转发到 http://xxx.xyz/，比方:

GET /api/user/id

将会被转发到

GET http://xxx.xyz/user/id

能够增加恣意多条转发划定规矩，划定规矩越靠后优化级越高。

比拟 nginx 费事不少，不须要每一个开辟职员再装置设置 nginx，能够在猎取代码后，直接实行

npm install

完成一切依靠的装置，然后便能够运用 npm start 启动 Server，并在浏览器中预览或调试了。

别的，在启动时还能够经由过程 -config 选项指定设置文件名，比方

nokit start 8000 -public=./dist -config=webserver

如许，运用根目次的 config.json 就能够换成 webserver.json 了。

也许，还愿望差别的「环境」转发到差别的「地点」，又或许每一个开辟职员须要差别转发划定规矩，能够经由过程 -env 指定差别的环境设置，也能够经由过程「体系环境变量 NODE_ENV」指定，以下

nokit start 8000 -public=./dist -env=local

或

export NODE_ENV=local

如许，在运用目次能够竖立一个 config.local.json 文件，花样和 config.json 雷同，nokit 会兼并这两个文件，雷同的设置节「环境设置文件」将掩盖「默许设置文件」的设置。

末了附上相干模块的 GitHub 地点:

  1. nokitjs https://github.com/nokitjs/nokit

  2. nokit-filter-proxy https://github.com/nokitjs/nokit-filter-…

    原文作者：Houfeng
    原文地址: https://segmentfault.com/a/1190000004933124
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞