nginx反向代理机制解决跨域问题详解【windows上的】
来源:互联网 发布:网络词鸡汤 编辑:程序博客网 时间:2024/06/12 22:13
以前学过linux服务器上的配置,感觉linux上的比较好用。下面是windows上的详细配置、案例和原理图:
1.背景
我要在本地服务器上的jsp【react】页面上访问聚合网上的数据,但是由于端口、域名、协议的不同导致浏览器识别为跨域请求,因此需要借用nginx的反向代理机制实现跨域请求【其实用jsonp是最简单的方法,但是生产方必须提供必要的回调api】。【什么是跨域】
2.解决方案
使用ngin反向代理实现跨域请求:
nginx.conf配置:
#user nobody;worker_processes 1;#error_log logs/error.log;#error_log logs/error.log notice;#error_log logs/error.log info;#pid logs/nginx.pid;events { worker_connections 1024;}http { include mime.types; default_type application/octet-stream; #log_format main '$remote_addr - $remote_user [$time_local] "$request" ' # '$status $body_bytes_sent "$http_referer" ' # '"$http_user_agent" "$http_x_forwarded_for"'; #access_log logs/access.log main; sendfile on; #tcp_nopush on; #keepalive_timeout 0; keepalive_timeout 65; #gzip on; #反向代理的配置; server { listen 8081; server_name 127.0.0.1; #charset koi8-r; #access_log logs/host.access.log main; location /juhe { proxy_pass http://api.shujuzhihui.cn/api/invokingApi/searchExpress?appKey=0c98fbe6005e4c09b398bf9fcaf9cd3d&expressNo=9891754549340; //------------------必须设置部分--------------------------- proxy_redirect default; proxy_connect_timeout 1s; proxy_read_timeout 30s; proxy_send_timeout 1s; add_header 'Access-Control-Allow-Headers' 'Content-Type'; add_header 'Access-Control-Allow-Origin' '*'; add_header 'Access-Control-Allow-Methods' 'GET'; //-------------------必须设置部分-------------------------- index index.html index.htm; } } # another virtual host using mix of IP-, name-, and port-based configuration # #server { # listen 8000; # listen somename:8080; # server_name somename alias another.alias; # location / { # root html; # index index.html index.htm; # } #} # HTTPS server # #server { # listen 443 ssl; # server_name localhost; # ssl_certificate cert.pem; # ssl_certificate_key cert.key; # ssl_session_cache shared:SSL:1m; # ssl_session_timeout 5m; # ssl_ciphers HIGH:!aNULL:!MD5; # ssl_prefer_server_ciphers on; # location / { # root html; # index index.html index.htm; # } #}}
不要忘了设置请求方式,否则参数的传递可能会出现问题
前端访问案例:
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><!DOCTYPE HTML><html><head><script src="http://libs.baidu.com/jquery/1.8.2/jquery.min.js"></script><script type="text/javascript"> $(function(){ alert('Hello'); //按钮单击时执行 $("#testAjax").click(function(){ //Ajax调用处理 $.ajax({ type: "POST", url: "http://127.0.0.1:8081/juhe/", data: "", success: function(data){ $("#myDiv").html('<h2>'+data+'</h2>'); } }); }); });</script> </head> <body> <div id="myDiv"><h2>通过 AJAX 改变文本</h2></div> <button id="testAjax" type="button">Ajax改变内容</button> </body></html>
3.根本原理
4.参考文档:Nginx 配置Ajax跨域访问
阅读全文
0 0
- nginx反向代理机制解决跨域问题详解【windows上的】
- 用nginx的反向代理机制解决前端跨域问题
- 用nginx的反向代理机制解决前端跨域问题
- 用nginx的反向代理机制解决前端跨域问题
- 用nginx的反向代理机制解决前端跨域问题
- 前端开发接口联调--用nginx的反向代理机制解决前端跨域问题
- 用nginx的反向代理机制解决前端跨域问题
- 用nginx的反向代理机制解决前端跨域问题
- 用nginx的反向代理机制解决前端跨域问题
- Nginx反向代理解决跨域问题
- nginx反向代理解决跨域问题
- 前端接口调试 -- 通过Nginx反向代理机制解决跨域问题
- 利用nginx 反向代理解决跨域问题
- 利用nginx 反向代理本地解决跨域问题
- nginx反向代理-解决前端跨域问题
- 利用nginx 反向代理解决跨域问题
- windows本地使用Nginx反向代理解决前后端联调的跨域访问
- nginx反向代理解决mac上tomcat80端口问题
- 第12周 【项目2 Dijkstra算法的验证】
- 商品详情页面
- Linux下apache日志分析与状态查看方法
- 4U8路服务器:将性能扩展到每一英寸
- 论文阅读《Multi-Scale Dense Convolutional Networks for Efficient Prediction 》
- nginx反向代理机制解决跨域问题详解【windows上的】
- Node.js 安装配置
- 动态规划---矩阵连乘问题
- jquery键盘事件
- Spring的注解@DependsOn
- 237. Delete Node in a Linked List
- 注册
- LeetCode-94. Binary Tree Inorder Traversal
- JavaScript图片压缩上传