nginx跨域访问
‘壹’ nginx怎么修改跨域配置
通过add_header参数添加CORS跨域响应头即可 Access-Control-Allow-Origin控制跨域源 Access-Control-Allow-Credentials控制是否带cookie Access-Control-Expose-Headers控制跨域拿到的一些额外字段
‘贰’ 如何设置nginx允许跨站请求
添加如下location:123location/{add_headerAccess-Control-Allow-Origin*;}。会在响应头中添加Access-Control-Allow-Origin字段以允许跨域。
‘叁’ “非”前后端分离javaweb项目,怎么使用nginx跨域
1:既然是别的api服务,那就建议你在jsp页面发起http请求去处理,不要用常用的ajax。
2:如果就用ajax,那可以看下jQuery封装下的ajax,有一个jsonp ,可以了解下。但是相对的可能api接口需要调整
3:nginx我暂时是没想到如何解决你说的问题。
‘肆’ nginx 怎么解决webservice跨域
下载Nginx
网络搜索Nginx,找到官网下载,如果是Linux系统,直接输入下面命令即可下载
wget http://nginx.org/download/nginx-1.8.1.tar.gz
我们这里使用的是1.8.1版本
安装Nginx
使用tar xvf nginx-1.8.1.tar.gz命令,解压刚下载文件,得到一个nginx-1.8.1目录。
进入nginx-1.8.1,执行./configure --prefix=/usr/local/nginx命令,表示将nginx安装到/usr/local/nginx目录下。
在使用make & make install命令正式安装nginx,完成后就可以在/usr/local/nginx目录下看到已经装好的nginx了。
如果安装权限不够,请使用sudo make install命令。
模拟跨域错误
启动Nginx,并在Nginx的html目录下,编写一个ajax.html页面,在里面通过ajax方式请求taobao的ip地址查询api。
在浏览器中访问http://127.0.0.1/ajax.html,然后按F12即可在Console里面看到跨域错误。
下面我们就通过Nginx来解决这种跨域问题。
‘伍’ 如何解决前端跨域问题
可以使用服务器代理或者在后端设置允许跨域。
现在的项目一般是在后端设置允许跨域,前端在带有允许跨域的情况下,可以像没有跨域一样正常访问。
如果前端单独发布到服务器,也可以在服务器是设置代理,使用代理转发请求。
‘陆’ nginx怎么修改跨域配置
通过add_header参数添加CORS跨域响应头即可
Access-Control-Allow-Origin控制跨域源
Access-Control-Allow-Credentials控制是否带cookie
Access-Control-Expose-Headers控制跨域拿到的一些额外字段
‘柒’ 同源策略与跨域问题解决
如果两个页面的协议,端口(如果有指定)和域名都相同,则两个页面具有相同的 源 。
举个例子:
下表给出了相对 http://a.bbb.com/dir/page.html 同源检测的示例:
由同源策略导致的的AJAX请求失败
例如:页面路径为: http://127.0.0.1:8848/fileTest/test.html
后台接口地址为: http://localhost:8080/sayHello
产生的结果:
此即为跨域请求失败
CORS是一个W3C标准,全称是"跨域资源共享"(Cross-origin resource sharing)。它允许浏览器向跨源服务器,发出 XMLHttpRequest 请求,从而克服了AJAX只能 同源 使用的限制。
在此之前,需要知道 简单请求、复杂请求
简单请求:
某些请求不会触发 CORS 预检请求 。本文称这样的请求为“简单请求”,请注意,该术语并不属于 Fetch (其中定义了 CORS)规范。若请求满足所有下述条件,则该请求可视为“简单请求”:
复杂请求:
与前述简单请求不同,“需预检的请求”要求必须首先使用 OPTIONS 方法发起一个预检请求到服务器,以获知服务器是否允许该实际请求。"预检请求“的使用,可以避免跨域请求对服务器的用户数据产生未预期的影响。当请求满足下述任一条件时,即应首先发送预检请求:
若需要跨域,则需要在请求头里添加 Origin 字段
请求至后台若符合后台请求规则则可成功请求,并且后台会返回相应的规则
当请求为复杂请求时,浏览器会在请求前先发送一个 OPTIONS 请求
OPTIONS 是一个预检请求,与简单请求不同的是它会额外携带两个参数: Access-Control-Request-Method :该次请求的请求方式 Access-Control-Request-Headers :该次请求的自定义请求头字段
OPTIONS 发送至后台若后台成功响应,则继续发送复杂请求,若响应失败则不会发送复杂请求
继续发送复杂请求
(1)、OPTIONS不会携带body若后台方法上使用@RequestBody注解,则会报错:
例如:
此时需要在@RequestBody后添加参数required=false,允许body为空
即可解决该问题
(2)、OPTIONS请求不应被过多的发送,因为它也是一个http请求也会占用一部分资源,相应的一种解决方法
在响应中添加缓存字段,以减少OPTIONS请求
(1)、在Java web工程中加如下列过滤器即可
(2)、在nginx中配置
使用反向代理工具解决跨域问题:如 Nginx 、 node.js
以Nginx为例:
在Nginx的配置文件中加入:
启动Nginx再以
http://127.0.0.1/fileTest/test.html 地址访问页面
http://127.0.0.1/sayHello 访问后台接口
发现可正常请求
上述以
http://127.0.0.1/fileTest/test.html 地址访问页面
http://127.0.0.1/sayHello 访问后台接口
的方式遵循了,浏览器的同源策略自然不存在跨域
Nginx代理了页面请求和接口请求,所以页面请求和接口请求都在Nginx源内由Nginx去完成页面请求和接口的请求即: http://127.0.0.1:80 内
所以浏览器访问页面和接口都是以 http://127.0.0.1:80 来进行访问的,满足了同源策略自然不存在跨域之说
图解:
跨域:
Nginx代理,满足同源策略
Nginx反向代理其实是一种欺骗浏览器的方法
[1] http://www.ruanyifeng.com/blog/2016/04/same-origin-policy.html 浏览器同源政策及其规避方法
[2] http://www.ruanyifeng.com/blog/2012/09/xmlhttprequest_level_2.html XMLHttpRequest Level 2 使用指南
[3] http://www.ruanyifeng.com/blog/2016/04/cors.html 跨域资源共享 CORS 详解
[4] https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Access_control_CORS HTTP访问控制(CORS)