nginx跨域
2023-09-11 14:20:30 时间
五. 后端配置nginx解决跨域(服务端解决跨域)
1. 依旧是ajax+node
这是前端代码
$(document).ready(function () {
$('#get').click(function () {
$.ajax({
url:'http://localhost:3002/ok',
// 带cookies的请求
xhrFields:{
withCredentials:true
},
success:function(res) {
console.log("success",res)
},
error:function(err) {
console.log('fail',err)
}
})
})
})
后端代码同前面
还有nginx配置如下:
server { listen 3002; server_name localhost; location /ok { proxy_pass http://localhost:3000; # 指定允许跨域的方法,*代表所有 add_header Access-Control-Allow-Methods *; # 预检命令的缓存,如果不缓存每次会发送两次请求 add_header Access-Control-Max-Age 3600; # 带cookie请求需要加上这个字段,并设置为true add_header Access-Control-Allow-Credentials true; # 表示允许这个域跨域调用(客户端发送请求的域名和端口) # $http_origin动态获取请求客户端请求的域 不用*的原因是带cookie的请求不支持*号 add_header Access-Control-Allow-Origin $http_origin; # 表示请求头的字段 动态获取 add_header Access-Control-Allow-Headers $http_access_control_request_headers; # OPTIONS预检命令,预检命令通过时才发送请求 # 检查请求的类型是不是预检命令 if ($request_method = OPTIONS){ return 200; } } }
发送预检命令的是非简单请求,具体可以看慕课网ajax跨域完全讲解
实际上不是非简单请求的且不带cookie只需2个字段即可解决跨域
add_header Access-Control-Allow-Methods *; add_header Access-Control-Allow-Origin $http_origin;
- 具体效果如下图:
这时只需改ajax请求的端口接口,无需修改前端服务器的地址
相关文章
- nginx简介
- Nginx跨域访问场景配置和防盗链
- SpringCloud、Nginx高并发核心编程 【2020年11月新书 】
- Zookeeper 与 nginx 作负载均衡对比
- Nginx作为缓存服务
- Nginx: content gradation index autoindex
- Nginx 笔记与总结(15)nginx 实现反向代理 ( nginx + apache 动静分离)
- Docker - 编译安装nginx镜像
- 关于直播学习笔记-004-nginx-rtmp、srs、vlc、obs
- Tomcat、Nginx/Openresty 隐藏版本号,使用nginx来统一显示错误页面
- 跨域问题-nginx代理
- 【nginx】配置Nginx实现负载均衡
- Nginx limit 限制访问模块的方法
- Nginx安装lua-nginx-module模块
- Linux运维之--LVS、Nginx、HAproxy有什么区别?
- nginx听课随记杂记
- Nginx
- AJAX跨域访问(从Tomcat8到Apache/Nginx/Spring Boot)
- 浅析Nginx实践里的常见概念:跨域及简单请求和非简单请求是什么、正向代理和反向代理是什么、负载均衡是什么、动静分离是什么、Nginx的配置语法及常用典型配置
- web运维第一篇:nginx配置文件详解笔记
- nginx 指定多个域名跨域请求配置 find ./ ! -path "./node_modules/*" -name *.js |xargs egrep basePath
- 让Apache 和nginx支持跨域訪问
- Linux服务器 离线安装 nginx-1.14.0,让你一路畅通无阻,3分钟就完成。