【Nginx】在Windows下使用Nginx解决前端跨域问题
提出问题:因为一些历史原因,后台代码不能动。请求别人的接口拿数据显示在前端,怎么办呢?
分析问题:通过ajax请求。
解决问题:因为浏览器的同源策略,所以需要解决跨域问题。(同源策略:请求的url地址,必须与浏览器上的url地址处于同域上,也就是域名、端口、协议相同。)
带着问题出发:使用Nginx做反向代理解决跨域问题
1、Nginx下载
地址:http://nginx.org/en/download.html
Nginx中文网:http://www.nginx.cn/doc/
2、下载完解压之后的文件目录
3、使用Notpad++打开conf文件夹下的nginx.conf配置文件并修改,主要修改http的server节点下
server{
# 设置本机监听的端口
listen 3868;
# 设置本机ip
server_name localhost;
client_max_body_size 20m;
location / {
root html;
index index.html index.htm;
client_max_body_size 20m;
}
# 匹配到/apis开头的接口时,转发到下面的服务器地址
location /apis {
if ($request_method = 'OPTIONS') {
add_header 'Access-Control-Allow-Origin' '*';
add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE, OPTIONS';
add_header 'Access-Control-Max-Age' 1728000;
add_header 'Content-Type' 'text/plain charset=UTF-8';
add_header 'Content-Length' 0;
return 204;
}
if ($request_method = 'POST') {
add_header 'Access-Control-Allow-Origin' *;
add_header 'Access-Control-Allow-Credentials' 'true';
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
add_header 'Access-Control-Allow-Headers' 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
}
if ($request_method = 'GET') {
add_header 'Access-Control-Allow-Origin' *;
add_header 'Access-Control-Allow-Credentials' 'true';
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
add_header 'Access-Control-Allow-Headers' 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
}
# 匹配apis之后的路径和参数
rewrite ^.+apis/?(.*)$ /$1 break;
include uwsgi_params;
# 实际调用的API
proxy_pass http://4.103.63.13:8080;
}
HTTPS的下载Nginx对应的证书
# HTTPS server
server {
listen 443; # 监听的端口号
server_name https://pl.com; # 服务器名称
client_max_body_size 100m; # 定义读取客户端请求大小
ssl on;
ssl_certificate test.pem; #配置证书位置
ssl_certificate_key test.key; #配置秘钥位置
ssl_session_timeout 5m;
ssl_protocols SSLv3 TLSv1.2;
ssl_ciphers ECDHE-RSA-AES256-SHA384:AES256-SHA256:RC4:HIGH:!MD5:!aNULL:!eNULL:!NULL:!DH:!EDH:!AESGCM;
ssl_prefer_server_ciphers on;
location / {
root html; # 静态资源目录
index index.html index.htm;
}
location /api {
proxy_pass https://4:8080; # 设置代理服务器的协议和地址
proxy_cookie_domain b.test.com a.test.com; # 修改cookie,针对request和response互相写入cookie
}
}
4、修改完成后保存,双击nginx.exe运行 或者命令行:nginx.exe
如果修改了配置文件可以命令行执行:nginx -s reload 重新加载
nginx -s reload # 重新载入配置文件
nginx -s reopen # 重启 Nginx
nginx -s stop # 停止 Nginx
5、地址栏输入配置的端口和servername,检查是否启动
也可在任务管理器中查看:
6、ajax调用
(1) GET:这样实际请求的url是:http://4.103.63.13:8080/Service/getStations/3
$.ajax({
url: "http://localhost:3868/apis/Service/getStations/3",
type: "GET",
success: function(res) {
alert(res.code);
}
});
(2) POST:如果是Ajax跨域ContentType为application/json请求时,注意使用JSON.stringify转一下
var params = {
Name : "string",
stationNo: "string"
}; $.ajax({
url: "http://localhost:3868/apis/Service/setInfo",
type: "POST",
data: JSON.stringify(params),
contentType: 'application/json',
success: function(res) {
alert(res.code);
}
});
(3) 扩展
http://jquery.cuishifeng.cn/jQuery.Ajax.html
使用Ajax跨域请求时,如果设置Header的ContentType为application/json,会分两次发送请求。第一次先发送Method为OPTIONS的请求到服务器,这个请求会询问服务器支持哪些请求方法(GET,POST等),支持哪些请求头等等服务器的支持情况。等到这个请求返回后,如果原来我们准备发送的请求符合服务器的规则,那么才会继续发送第二个请求,否则会在Console中报错。
为什么在跨域的时候设置ContentType为application/json时会请求两次?其实JQuery的文档对此有做说明。
contentType (default: 'application/x-www-form-urlencoded; charset=UTF-8')
Type: Boolean or String
When sending data to the server, use this content type. Default is "application/x-www-form-urlencoded; charset=UTF-8", which is fine for most cases. If you explicitly pass in a content-type to $.ajax(), then it is always sent to the server (even if no data is sent). As of jQuery 1.6 you can pass false to tell jQuery to not set any content type header. Note: The W3C XMLHttpRequest specification dictates that the charset is always UTF-8; specifying another charset will not force the browser to change the encoding. Note: For cross-domain requests, setting the content type to anything other than application/x-www-form-urlencoded, multipart/form-data, or text/plain will trigger the browser to send a preflight OPTIONS request to the server.
注意Note后面的描述,在跨域的时候,除了contentType为application/x-www-form-urlencoded,multipart/form-data或者text/plain外,都会触发浏览器先发送方法为OPTIONS的请求。
比如说,你原来的请求是方法方法POST,如果第一个请求返回的结果Header中的Allow属性并没有POST方法,那么第二个请求是不会发送的,此时浏览器控制台会报错,告诉你POST方法并不被服务器支持。
做到这里可以说完美解决了,但是前面说了是历史原因,肯定要在IE8上试试,啥反应都没有
在js里加上这段话即可~
jQuery.support.cors = true;
这句话的意思就是指定浏览器支持跨域。IE9以上版本的浏览器、谷歌、火狐等都默认支持跨域,而IE8、9却默认不支持跨域,需要我们指定一下。
注意:接口API和Nginx只能一处配置跨域,如果API后台配置了允许跨域请求,Nginx就不能配置跨域了,不然会报错:but only one is allowed. Origin
【Nginx】在Windows下使用Nginx解决前端跨域问题的更多相关文章
- 用nginx的反向代理机制解决前端跨域问题在nginx上部署web静态页面
用nginx的反向代理机制解决前端跨域问题在nginx上部署web静态页面 1.什么是跨域以及产生原因 跨域是指a页面想获取b页面资源,如果a.b页面的协议.域名.端口.子域名不同,或是a页面为ip地 ...
- 项目部署问题:xftp无法连接服务器、Nginx403 Forbidden解决、nginx反向代理解决前端跨域问题
一.xftp无法连接服务器 在xftp中配置正确的ip,用户名和密码后,居然无法连接 解决方案:将协议里面的FTP换成SFTP,注意换成SFTP后端口就默认换成22,要还是原来的21就还是连不上的哈 ...
- 完美解决前端跨域之 easyXDM 的使用和解析
前端跨域问题在大型网站中是比较常见的问题.本文详细介绍了利用 easyXDM 解决前端跨域的原理细节和使用细节,具体使用时可以在文中代码实例的基础上扩展完成. 0.背景 因个别网络运营商存在 HTTP ...
- JAVA解决前端跨域问题。
什么是跨域? 通俗来说,跨域按照我自己的想法来理解,是不同的域名之间的访问,就是跨域.不同浏览器,在对js文件进行解析是不同的,浏览器会默认阻止,所以 现在我来说下用java代码解决前端跨域问题. 用 ...
- 如何用Nginx解决前端跨域问题?
前言 在开发静态页面时,类似Vue的应用,我们常会调用一些接口,这些接口极可能是跨域,然后浏览器就会报cross-origin问题不给调. 最简单的解决方法,就是把浏览器设为忽略安全问题,设置--di ...
- 用nginx的反向代理机制解决前端跨域问题
什么是跨域以及产生原因 跨域是指a页面想获取b页面资源,如果a.b页面的协议.域名.端口.子域名不同,或是a页面为ip地址,b页面为域名地址,所进行的访问行动都是跨域的,而浏览器为了安全问题一般都限制 ...
- 用nginx解决前端跨域问题
假如前端你项目部署在nginx的根目录下,然后项目需要请求后台小伙伴写的接口 nginx配置: #user nobody; worker_processes 1; #error_log logs/er ...
- nginx反向代理-解决前端跨域问题
1.定义 跨域是指a页面想获取b页面资源,如果a.b页面的协议.域名.端口.子域名不同,所进行的访问行动都是跨域的,而浏览器为了安全问题一般都限制了跨域访问,也就是不允许跨域请求资源.注意:跨域限制访 ...
- 使用nginx反向代理解决前端跨域问题
1. 首先去Nginx官网下载一个最新版本的Nginx,下载地址:http://nginx.org/en/download.html.我这里下载的版本是:nginx/Windows-1.12.0.下载 ...
随机推荐
- 第17课 lambda表达式
一. lambda表达式 (一)语法定义:[capture](paramters) mutable ->returnType{statement} 1.[capture]:捕获列表 (1)lam ...
- Docker 创建 Redis 容器
Docker 创建 Redis 容器 # 配置文件映射: # -v /root/redis/redis.conf:/etc/redis/redis.conf # 数据目录映射: # -v /root/ ...
- fiverr无法注册的解决办法,fiverr注册教程
转载 https://www.wok99.com/450.html
- scala练习题--万年历
使用方法去完成 import scala.io.StdIn object work1 { def main(args: Array[String]): Unit = { // 1.先输出提示语句,并 ...
- nginx 的一些优化(突破十万并发)
一般来说 nginx 配置文件中对优化比较有作用的为以下几项: worker_processes 8; nginx 进程数,建议按照 cpu 数目来指定,一般为它的倍数. worker_cpu_aff ...
- Maven中的依赖相关总结
一.Maven的依赖作用域scope compile:编译.测试.运行都会依赖,会打进包中. rumtime:不存于编译,后期运行和测试都会参与,会打进包中. test:只在test classpat ...
- JS中判断是中文数字的函数
function checkcnnum(str) { ; const zh = ['零', '一', '二', '三', '四', '五', '六', '七', '八', '九','十','百','千 ...
- c# 合并两个DataTable
当两个DataTable 结构相同可以用自带方法(Merge)合并 // // 摘要: // 将指定的 System.Data.DataTable 与当前的 DataTable 合并,指示是否在当前的 ...
- python 进程和线程-简介及进程
进程和线程的关系及应用 参考链接:https://www.liaoxuefeng.com/wiki/1016959663602400/1017627212385376 多任务: 什么叫“多任务”呢?简 ...
- Django---CSRF的装饰器,CSRF的流程,JSON数据格式,ajax技术(基于JQ实现)
Django---CSRF的装饰器,CSRF的流程,JSON数据格式,ajax技术(基于JQ实现) 一丶CSRF相关的装饰器 from django.utils.decorators import m ...