浏览器访问nginx(浏览器访问nginx为什么不会跨域)

浏览器访问nginx为什么不会跨域

可以通过nginx配置端口转发

浏览器nginx解决跨域请求

在开发静态页面时，类似Vue的应用，我们常会调用一些接口，这些接口极可能是跨域，然后浏览器就会报cross-origin问题不给调。

最简单的解决方法，就是把浏览器设为忽略安全问题，设置--disable-web-security。不过这种方式开发PC页面到还好，如果是移动端页面就不行了。

解决办法

使用Nginx转发请求。把跨域的接口写成调本域的接口，然后将这些接口转发到真正的请求地址。

其实不仅是在开发调试时候能这么干，在生产环境也能这么玩。利用Nginx转发请求之后，就能够让所要部署的静态页面不需要放在跟请求接口同域的地方。

浏览器访问出现nginx

方法如下：

1.从nginx官网下载相应的安装包。

2.建议下载 下载稳定版。

3.解压到相应的目录，比如是e盘 然后修改目录名字为nginx。

4.进入nginx目录 双击nginx.exe 来启动nginx。

5.此时 直接在浏览器地址栏输入：localhost 便能看到 欢迎页面，说明虚拟主机已经搭建好了。

6.但是有时候，需要配置路径，在默认情况下，root是nginx目录下的html文件夹，如若修改 则打开conf目录下的nginx.conf。

7.找到server 选项 修改咯location 中的root 选项。

8.比如修改到D：/webroot 则修改为：

浏览器访问nginx为什么不会跨域了

1.跨域问题的由来

何谓同源:URL由协议、域名、端口和路径组成，如果两个URL的协议、域名和端口相同，则表示它们同源。浏览器的同源策略，从一个域上加载的脚本不允许访问另外一个域的文档属性 ，是浏览器上为安全性考虑实施的非常重要的安全策略。举个例子：比如一个恶意网站的页面通过iframe嵌入了银行的登录页面（二者不同源），如果没有同源限制，恶意网页上的javascript脚本就可以在用户登录银行的时候获取用户名和密码。

2.跨域的影响范围

在浏览器中，<script>、<img>、<iframe>、<link>等标签都可以加载跨域资源，而不受同源限制，

但浏览器会限制脚本中发起的跨域请求。比如，使用 XMLHttpRequest 对象和Fetch发起 HTTP 请求就必须遵守同源策略。

Web 应用程序通过 XMLHttpRequest 对象或Fetch能且只能向同域名的资源发起 HTTP 请求，而不能向任何其它域名发起请求。

不允许跨域访问并非是浏览器限制了发起跨站请求，而是跨站请求可以正常发起，但是返回结果被浏览器拦截了。

最好的例子是CSRF跨站攻击原理，请求是发送到了后端服务器,无论是否设置允许跨域,

有些浏览器不允许从HTTPS跨域访问HTTP，比如Chrome和Firefox，这些浏览器在请求还未发出的时候就会拦截请求,这是特例。

此外父页面js操作不同域的iframe属性时，也会受到跨域限制

nginx为什么可以解决跨域

通过add_header命令为响应增加跨域头：add_header "Access-Control-Allow-Origin" "*";

浏览器访问nginx为什么不会跨域访问

在Nginx中修改跨域配置非常简单，只需要在虚拟主机配置文件中添加以下内容：

add_header Access-Control-Allow-Origin *; 

add_header Access-Control-Allow-Methods GET, POST, OPTIONS;

add_header Access-Control-Allow-Headers DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type; 

add_header Access-Control-Max-Age 1728000; 

其中，Access-Control-Allow-Origin用于指定允许跨域请求的域名，Access-Control-Allow-Methods用于指定允许跨域请求的HTTP方法，Access-Control-Allow-Headers用于指定允许跨域请求的HTTP头，Access-Control-Max-Age用于指定允许跨域请求的缓存时间。