npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

proxy-server-cors

v0.0.4

Published

A proxy server to handle cors

Downloads

9

Readme

proxy-server-cors

背景

有这样一些场景(主要是处理Chrome开发环境报跨域问题):

  1. 前端开发环境的服务器,需要代理测试环境接口,但测试环境部署的后端接口并没有配置cors,但项目中有些接口是重定向的,重定向的location会被浏览器默认返回服务器的真实地址,导致跨域问题,浏览器请求不同
  2. 前端请求直接不同域的接口,chrome浏览器也会报跨域问题

解决方式: 一般需要后端去配置cors一些配置,但为了保证安全性,同时再不改变后端的前提下,前端通过一个中转服务器去代理客户端接口,然后请求目标服务器,同时将这个服务器的cors配置好,相当于对此代理服务器进行了绝对的放行,但并不影响真实的服务器的配置。这个服务器就是这个原理

Install

pnpm i -D proxy-server-cors

Usage

可以在命令行中使用proxy-server-cors命令来启动这个服务器。需要提供一些选项,如目标服务器的URL、监听的端口和主机名等。以下是一个示例:

proxy-server-cors --target http://example.com --port 8000 --hostname localhost

这将会启动一个监听localhost的8000端口的HTTP代理服务器,所有的请求都会被代理到http://example.com。

https

如果你需要HTTPS,你可以提供--https、--key和--cert选项,如下所示:

proxy-server-cors --target http://example.com --port 8000 --hostname localhost --https ./key.pem --cert ./cert.pem

这将会启动一个监听localhost的8000端口的HTTPS代理服务器,所有的请求都会被代理到http://example.com。请注意,你需要将./key.pem和./cert.pem替换为你的HTTPS证书的实际路径。

配置文件

你也可以使用一个.proxyrc.js文件来配置你的服务器。这个文件应该导出一个对象,这个对象包含了你的配置选项。例如:

module.exports = {
    target: 'http://example.com',
    port: 8000,
    hostname: 'localhost',
    https: false,
};

然后,你可以使用以下命令来启动你的服务器:

proxy-server-cors

这将会使用.proxyrc.js文件中的配置选项来启动你的服务器。如果你想覆盖配置文件中的某些选项,你可以提供命令行参数。

项目中使用

例如proxy-sever启动的接口是http://127.0.0.1:3000

重定向的问题

针对于重定向的跨域,可以配置proxy的时候将proxy-server-cors作为target,因为它代理了目标服务器的接口

module.exports = {
    '/api': {
        target: 'http://127.0.0.1:3000',
        changeOrigin: true,
    }
}

直接访问跨域服务器的问题

有些环境或者老项目通过直接访问服务器接口,所以会配置访问前缀,然后不同的环境变量去更改不同的前缀,所以我们只需要配置开发环境下的前缀为proxy-server-cors的地址,下面是伪代码

let API_PREFIX = ''
switch (process.env.NODE_ENV) {
 case 'dev':
  API_PREFIX = 'http://127.0.0.1:3000'
  break;
}

LICENSE

MIT