-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
5 changed files
with
529 additions
and
1 deletion.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,2 +1,82 @@ | ||
# preflight-request-proxy | ||
# 🚀 preflight-request-proxy | ||
|
||
[](https://github.com/barbhackk/preflight-request-proxy "Go to GitHub repo") | ||
[](https://img.shields.io/badge/langage-javascript-blue?logo=javascript) | ||
[](#license) | ||
[](https://github.com/barbhackk/preflight-request-proxy/issues) | ||
[](https://github.com/barbhackk/preflight-request-proxy) | ||
[](https://github.com/barbhackk/preflight-request-proxy) | ||
|
||
Proxy a CORS preflight request | ||
|
||
> [!IMPORTANT] | ||
> Use this tool only for your development. | ||
# 🔨 Description | ||
|
||
Browsers implementing a same-origin policy prevent website scripts served on one origin from making requests to another origin using methods such as XMLHttpRequest or the Fetch API. | ||
There are cases of exceptions but from the moment we touch the header of a request: “Accept”, “Content-Type”, “Authorization”… the policy is applied. | ||
|
||
> Cross-Origin Resource Sharing (CORS) is an HTTP-header based mechanism that allows a server to indicate any origins (domain, scheme, or port) other than its own from which a browser should permit loading resources. CORS also relies on a mechanism by which browsers make a "preflight" request to the server hosting the cross-origin resource, in order to check that the server will permit the actual request. In that preflight, the browser sends headers that indicate the HTTP method and headers that will be used in the actual request. | ||
> | ||
> https://developer.mozilla.org/fr/docs/Web/HTTP/CORS | ||
For security reasons, multi-origin HTTP requests issued from scripts are restricted by the browser. | ||
The browser considers two URLs to be of the same origin if they have the same scheme, domain and port number (if the URL includes a port). | ||
|
||
<p align="center"> | ||
<img src="./cross-origin.png"> | ||
</p> | ||
|
||
A pre-check request is automatically sent by the browser when necessary. | ||
|
||
A CORS cross-origin pre-check request is a verification request made to check whether the CORS protocol is authorized. | ||
It is a request using the OPTIONS method that uses three HTTP headers: The Access-Control-Request-Method, the Access-Control-Request-Headers and Origin headers. | ||
|
||
# 🔥 Usage | ||
|
||
npm run start -- --help | ||
|
||
``` | ||
Preflight request proxy | ||
If you want to use the local development environment with the dev | ||
backend,this will create a proxy so you won't run into CORS issues.It accepts | ||
the following command line parameters: | ||
- Port : the port where the proxy will listen | ||
- Target : the DEV backend target to contact. | ||
Example: If you set the port to 3000 and target to http://localhost:45680 | ||
thenyour actual "resourceBaseUrl" in setting should be | ||
http://localhost:3000/api/v1 | ||
Options | ||
-p, --port number The listened port au reverse proxy. By default port | ||
3000 is used. | ||
-t, --target string The targeted URL (for exemple your local API, | ||
http://127.0.0.1:8001). By default | ||
http://127.0.0.1:8000 is used. | ||
--help string Print this usage guide. | ||
Project write by Sébastien DOUTRE: https://github.com/barbhackk | ||
``` | ||
|
||
## 💪 Basic usage | ||
|
||
For use http://localhost:45469 TO http://localhost:99898 | ||
|
||
`npm run start -- -p 45469 -t http://localhost:99898` | ||
|
||
The reverse proxy will now respond to preliminary requests that say the API can communicate with localhost:99898. | ||
|
||
# ❤️ Contributing | ||
|
||
1. Fork it (https://github.com/sr6033/lterm/fork) | ||
2. Create your feature branch (git checkout -b feature/fooBar) | ||
3. Commit your changes (git commit -am 'Add some fooBar') | ||
4. Push to the branch (git push origin feature/fooBar) | ||
5. Create a new Pull Request | ||
|
||
### 🐛 Bug Reports & Feature Requests | ||
Please use the [issue](https://github.com/barbhackk/preflight-request-proxy/issues) tracker to report any bugs or file feature requests. |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,112 @@ | ||
import chalk from 'chalk'; | ||
import commandLineArgs from 'command-line-args'; | ||
import commandLineUsage from 'command-line-usage'; | ||
import http from 'http'; | ||
import httpProxy from 'http-proxy'; | ||
|
||
const description = 'If you want to use the local development environment with the dev backend,\ | ||
this will create a proxy so you won\'t run into CORS issues.\ | ||
It accepts the following command line parameters: \r\n\ | ||
- Port : the port where the proxy will listen \r\n\ | ||
- Target : the DEV backend target to contact. \r\n\r\n\ | ||
Example: If you set the port to 3000 and target to http://localhost:45680 then\ | ||
your actual "resourceBaseUrl" in setting should be http://localhost:3000/api/v1'; | ||
|
||
const sections = [ | ||
{ | ||
header: chalk.bold.green("Preflight request proxy"), | ||
content: chalk.white(description), | ||
}, | ||
{ | ||
header: 'Options', | ||
optionList: [ | ||
{ | ||
name: 'port', | ||
alias: 'p', | ||
typeLabel: '{underline number}', | ||
description: 'The listened port au reverse proxy. By default port 3000 is used.' | ||
}, | ||
{ | ||
name: 'target', | ||
alias: 't', | ||
typeLabel: '{underline string}', | ||
description: 'The targeted URL (for exemple your local API, http://127.0.0.1:8001). By default http://127.0.0.1:8000 is used.' | ||
}, | ||
{ | ||
name: 'help', | ||
description: 'Print this usage guide.' | ||
} | ||
] | ||
}, | ||
{ | ||
content: 'Project write by Sébastien DOUTRE: {underline https://github.com/barbhackk}' | ||
} | ||
] | ||
const usage = commandLineUsage(sections) | ||
|
||
// Define the command line options | ||
const optionDefinitions = [ | ||
{ name: "help", alias: "h", type: Boolean, defaultValue: false }, | ||
{ name: "port", alias: "p", type: Number, defaultValue: 3000 }, | ||
{ name: "target", alias: "t", type: String, defaultValue: "http://127.0.0.1:8000" } | ||
]; | ||
|
||
// parse command line options | ||
const options = commandLineArgs(optionDefinitions); | ||
|
||
if (options.help) { | ||
console.log(usage); | ||
} else { | ||
// Start the proxy | ||
console.log("Start proxy on port", options.port, "for", options.target); | ||
|
||
// Create a proxy server with custom application logic | ||
var proxy = httpProxy.createProxyServer({}); | ||
var sendError = function (res, err) { | ||
return res.status(500).send({ | ||
error: err, | ||
message: "An error occured in the proxy" | ||
}); | ||
}; | ||
|
||
// error handling | ||
proxy.on("error", function (err, req, res) { | ||
sendError(res, err); | ||
}); | ||
|
||
var enableCors = function (req, res) { | ||
res.setHeader('access-control-allow-origin', '*'); | ||
res.setHeader('access-control-allow-methods', 'GET, PUT, PATCH, POST, DELETE'); | ||
res.setHeader('access-control-allow-credentials', 'true'); | ||
|
||
if (req.headers['access-control-request-headers']) { | ||
res.setHeader('access-control-allow-headers', req.headers['access-control-request-headers']); | ||
} | ||
}; | ||
|
||
// set header for CORS | ||
proxy.on("proxyRes", function (proxyRes, req, res) { | ||
enableCors(req, res); | ||
}); | ||
|
||
var server = http.createServer(function (req, res) { | ||
// You can define here your custom logic to handle the request | ||
// and then proxy the request. | ||
if (req.method === 'OPTIONS') { | ||
console.log(chalk.magenta(req.method + " | ") + chalk.bgCyan.white("Pre-flight request interception : ") + chalk.bold(req.url)); | ||
enableCors(req, res); | ||
res.writeHead(204); | ||
res.end(); | ||
return; | ||
} | ||
|
||
console.log(chalk.magenta(req.method + " | ") + chalk.gray("Redirect to --> ") + chalk.bold(options.target + req.url)); | ||
proxy.web(req, res, { | ||
target: options.target | ||
}, function (err) { | ||
sendError(res, err); | ||
}); | ||
}); | ||
|
||
server.listen(options.port); | ||
} |
Oops, something went wrong.