Front-end development with Nginx Proxy Server to resolve server cross-domain issues and cross-domain access to HTTPS access (Mac System)

Source: Internet
Author: User
Tags nginx server

Front-end development often encounters situations where servers are inaccessible due to cross-domain access. Before the BS model, the front and back end are a human development, cross-domain problems caused by the development of obstacles is not obvious, but now the front-end framework is thriving, many times into the development of CS mode, but the browser is inherently cross-domain restrictions, resulting in the development, In particular, the individual front-end developers (who do not understand background development) create a certain development barrier. Fortunately, there are Nodejs and a series of front-end automation tools to solve the development problem. But today I want to say with Nginx proxy to solve this problem. I think it's simple!
The following are all based on MAC system operation!
First look at no agent, casually access an interface on the internet, Http://web.juhe.cn:8080/finance/exchange/rmbquot

$.get (' Http://web.juhe.cn:8080/finance/exchange/rmbquot ', function (data) {$ (' #app '). HTML (data);})

Will find below the browser,


1. Install Nginx server, can see my this blog http://www.cnblogs.com/fengnovo/p/6230013.html

2. Modify the next/usr/local/etc/nginx/nginx.conf file to

The server {}  wrapped up the paragraph to the following
Add_header access-control-allow-origin *;add_header access-control-allow-headers X-Requested-With;add_header Access-control-allow-methods Get,post,options;server {        Listen 8000;        Location/api {            

}

The above three sentences are the clients that set the server side to allow requests across domains,
The following sentence is to listen on the native (localhost) 8000 port, forwarding 8000 port/api request to Http://web.juhe.cn:8080/finance/exchange/rmbquot

3. Then start the Nginx server

4. Modify your own code and change Http://web.juhe.cn:8080/finance/exchange/rmbquot to point to your Nginx server Http://localhost:8000/api

$.get (' Http://localhost:8000/api ', function (data) {$ (' #app '). HTML (data);
})

5. Then visit, you can print the data returned by the server will no longer appear no ' access-control-allow-origin ' header is present error


6. For HTTPS request is the same proxy, will proxy_pass Http://web.juhe.cn:8080/finance/exchange/rmbquot; instead of Proxy_pass https://xxx.com;

Front-end development with Nginx Proxy Server to resolve server cross-domain issues and cross-domain access to HTTPS access (Mac System)

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.