Recently done projects, the front end need to use the Nginx reverse proxy to forward the request, summed up the configuration on Windows and Mac, in case of query.
First, Windows
Modify the Nginx configuration file, nginx.conf.
1) nginx.conf file, HTTP, the default open server is only one, listening to the 80 port:
1 http{2XXXXX3server{4 listen; 5 XXXX6} 7 }
2) We manually add a server (virtual machine) so that local use of false data to impersonate the request JSON file is not requested because of cross-domain.
1 http{2 XXXX3 server{4 Listen;5 XXXX6 }7 server{8 # port, define yourself, don't duplicate the name9 Listen 8088;Ten server_name localhost; One # path for static files project folder, pointing to the compiled folder A # The path I'm pointing to is the compiled folder, which actually points to the folder where you want to run the HTML. - root D:\BigCity\americanschool\frontend\output; - #Specify a charset the CharSet Utf-8; - # Open SSI - SSI on; - ssi_silent_errors off; + # SSI is valid for all file types - ssi_types *; + A #转发所有的json文件的请求23 Location ~ (. *\.json) {#我这里json文件放的目录和工程目录是同一个, so the root address is the same as above; Also, note that if you compile the source file with NPM, The JSON in the source file may not be generated to the output folder and need to be copied manually to request it properly; root d:\bigcity\americanschool\frontend\output;26 error_page 405 =200 $1;27}28}29}
3) When the backend program is deployed, the front end of the deployment, you need to transfer the request to the actual backend, need to modify ngnix.conf as follows:
1 server {2 # port, define yourself, don't duplicate the name3 Listen 8088;4 server_name localhost;5 # path for static files project folder, pointing to the compiled folder6 # The path I'm pointing to is the compiled folder, which actually points to the folder where you want to run the HTML.7 root D:\BigCity\americanschool\frontend\output;8 #Specify a charset9 CharSet Utf-8;Ten # Open SSI One SSI on; A ssi_silent_errors off; - # SSI is valid for all file types - ssi_types *; the # error_log Logs/km.error.log warn; - #将/test/The beginning of the request forward to the back-end server - #XXXX是你的后端服务器的ip - #对应前端js中的ajax的请求是:/rest/aaaaa/bbbbbb + Location ^~/rest/{proxy_pass http://XXXX/rest/; +}}
After this configuration, the AJAX request initiated under Path D:\BigCity\americanschool\frontend\output, as long as it starts with/rest/, is forwarded to the address pointed to by Proxy_pass, which is the HTTP/ XXXX and Ajax access to the URL stitching up, get: http://XXXX/rest/aaaaa/bbbbbb
Second, the configuration under the Mac
Mac, installed Nginx can not be modified in the text editor, can only be viewed in "terminal", and there is no modified permissions; Therefore, you can only copy the nignx.conf file, change it, then copy it back, note the need to use sudo.
[Nginx] Under Windows and Mac, Nginx reverse proxy server configuration