Nginx cross-domain configuration and Https

1. What is cross-domain?

Cross-domain: refers to the browser can not execute scripts other sites. It is caused by the browser's same-origin policy, are browser security restrictions imposed on javascript (refer to the document or script in a domain try to request resources in another domain, there is a broad cross-domain)

For example: a page b want to get the resources page, if a, b agreement page, domain name, port, different sub-domain name, access operations are carried out across domains, and the browser for security issues generally restrict cross-domain access , which is not allowed to cross-domain requests resources. Note: cross-domain access restrictions, in fact, is to limit the browser . It is important to understand! ! !

Broad cross-domain:

1.) 资源跳转：A链接、重定向、表单提交

2.) 资源嵌入：<link>、<script>、<img>、<frame>等dom标签，还有样式中background:url()、@font-face()等文件外链

3.) 脚本请求：js发起的ajax请求、dom和js对象的跨域操作等其实我们通常所说的跨域是狭义的，是由浏览器同源策略限制的一类请求场景。

2. What is the origin policy?

Source Strategies / SOP (Same origin policy) is a convention, introduced the browser by Netscape in 1995, it is the core of the browser is also the most basic security feature, if the lack of the same origin policy, the browser is vulnerable to XSS, CSFR attacks. Homologous refers to the so-called "protocol + domain name + port" the same three ( 其中有一个不同都会产生跨域), even if two different domain names point to the same ip address, nor homologs.

Several same-origin policy restrictions following behaviors:

1.) Cookie、LocalStorage 和 IndexDB 无法读取

2.) DOM 和 Js对象无法获得

3.) AJAX 请求不能发送

3. Common cross-domain scenario

3. Examples of cross-domain access

Suppose there are two sites, A site deployment in: http: // localhost: 81 that is the local ip port 81;

B website deployed: http: // localhost: 82 that is on the local ip port 82.

A website page now want access to the information B site, A Web page code is as follows (here using jquery asynchronous requests)

$(function (){

$.get("http://localhost:82/api/values", {},function (result) {

$("#show").html(result);

})})；

As can be seen from the above error message appears the cross-domain problem!

4 . Cross-domain solutions

1、 通过jsonp跨域
2、 document.domain + iframe跨域
3、 location.hash + iframe
4、 window.name + iframe跨域
5、 postMessage跨域
6、 跨域资源共享（CORS）
7、 nginx代理跨域
8、 nodejs中间件代理跨域
9、 WebSocket协议跨域

5 . Nginx cross-domain solutions

First on the map:

首先我们用nginx作为代理服务器和用户交互，这样用户就只需要在80端口上进行交互就可以了，这样就避免了跨域问题，因为我们都是在80端口上进行交互的；

下面我们看一下利用nginx作为反向代理的具体配置：

server {

listen 80; #监听80端口，可以改成其他端口

server_name localhost; # 当前服务的域名

#charset koi8-r;

#access_log logs/host.access.log main;

location / {

proxy_pass http://localhost:81;

proxy_redirect default;

}

location /apis { #添加访问目录为/apis的代理配置

rewrite ^/apis/(.*)$ /$1 break;

proxy_pass http://localhost:82;

}

#以下配置省略

1.当用户发送localhost:80/时会被nginx转发到http://localhost:81服务；

2.当界面请求接口数据时，只要以/apis 为开头，就会被nginx转发到后端接口服务器上；

总结：nginx实现跨域的原理，实际就是把web项目和后端接口项目放到一个域中，这样就不存在跨域问题，然后根据请求地址去请求不同服务器（真正干活的服务器）；

6. nginx跨域解决方案

Nginx cross-domain configuration and Https

Guess you like