wordpress怎样做手机站,西安通程建设工程 网站,wordpress搭建表单,卖老石器老榆木做哪个网站好今天来分享一下关于项目部署上线时怎么解决跨域问题!!! 首先感谢一下大佬的方法,才让这个困扰我很久的问题得以解决!!! 这也是我请教大佬才解决的问题,大佬和我说,这是他耗费两周才解决的问题,我这也是属于前人栽树后人乘凉了,嘿嘿嘿!!! 前端问题
前端没有携带 cookie 导致后端…今天来分享一下关于项目部署上线时怎么解决跨域问题!!! 首先感谢一下大佬的方法,才让这个困扰我很久的问题得以解决!!! 这也是我请教大佬才解决的问题,大佬和我说,这是他耗费两周才解决的问题,我这也是属于前人栽树后人乘凉了,嘿嘿嘿!!! 前端问题
前端没有携带 cookie 导致后端识别不到
1 前端 axios 是否开启了 withCredentialstrue
2 在 OpenAPI 的那边配置项设置下 withCrendential 首先 F12 看 login 接口对应的网络请求有没有 ⚠️如果有那是后端的问题如果没有那是前端的问题 后端问题 YML 配置
复制代码
server:servlet:session:cookie:domain: 域名或者IPhttp 环境就不要使用 secure 和samesite 使用宝塔跨域 后端相关的反向代理跨域 server {# 这个监听的端口任意都行但是要注意前端要请求这个端口listen 9090;server_name localhost;location / {# 禁止非 GET|POST|HEAD|OPTIONS|PUT|PATCH|DELET 的请求if ( $request_method !~ ^(GET|POST|HEAD|OPTIONS|PUT|PATCH|DELETE)$ ) {return 444;}set $origin $http_origin;# 重点比如# $origin !~ ^http?://leikooo\.com$# $origin !~ ^http?://127.0.0.1$if ($origin !~ ^http?://服务器IP或者域名$) {set $origin http://服务器IP或者域名;}if ($request_method OPTIONS) {add_header Access-Control-Allow-Origin $origin always;add_header Access-Control-Allow-Methods GET, POST, PATCH, PUT, DELETE, OPTIONS always;add_header Access-Control-Allow-Headers Content-Type, Accept, Authorization always;add_header Access-Control-Allow-Credentials true always;add_header Access-Control-Max-Age 1728000;add_header Content-Type text/plain charsetUTF-8;add_header Content-Length 0;return 204;}if ($request_method ~ (GET|POST|PATCH|PUT|DELETE)) {add_header Access-Control-Allow-Origin $origin always;add_header Access-Control-Allow-Methods GET, POST, PATCH, PUT, DELETE, OPTIONS always;add_header Access-Control-Allow-Headers Content-Type, Accept, Authorization always;add_header Access-Control-Allow-Credentials true always;}# 反向代理到后端具体运行的端口proxy_pass http://localhost:后端实际运行端口;proxy_set_header Host $host;proxy_set_header X-Real-IP $remote_addr; }
}注意 前端请求 9090 上面 server 模块下 listen 的端口而不是直接请求后端实际运行端口 直接请求后端端口那么 Nginx 就失去了存在的意义 宝塔 服务器放行 9090 端口这个要注意具体看自己写的是哪个端口 完成 添加 nginx 配置 放行端口 正常就没什么问题了
使用原生 Nginx 跨域
经过实际测试用 nginx 跨域就可以解决
user root;
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;access_log logs/access.log;sendfile on;keepalive_timeout 65;#gzip on;# 前端配置不是重点server {listen 80;server_name localhost ;root /root/app/dist;# 访问默写前端页面 404 就是没加下面这行的原因try_files $uri $uri/ /index.html;location / {index index.html index.htm;}} # 后端相关的反向代理跨域server {# 这个监听的端口任意都行但是要注意前端要请求这个端口listen 9090;server_name localhost;location / {# 禁止非 GET|POST|HEAD|OPTIONS|PUT|PATCH|DELET 的请求if ( $request_method !~ ^(GET|POST|HEAD|OPTIONS|PUT|PATCH|DELETE)$ ) {return 444;}set $origin $http_origin;# 重点比如# $origin !~ ^http?://leikooo\.com$# $origin !~ ^http?://127.0.0.1$if ($origin !~ ^http?://服务器IP或者域名$) {set $origin http://服务器IP或者域名;}if ($request_method OPTIONS) {add_header Access-Control-Allow-Origin $origin always;add_header Access-Control-Allow-Methods GET, POST, PATCH, PUT, DELETE, OPTIONS always;add_header Access-Control-Allow-Headers Content-Type, Accept, Authorization always;add_header Access-Control-Allow-Credentials true always;add_header Access-Control-Max-Age 1728000;add_header Content-Type text/plain charsetUTF-8;add_header Content-Length 0;return 204;}if ($request_method ~ (GET|POST|PATCH|PUT|DELETE)) {add_header Access-Control-Allow-Origin $origin always;add_header Access-Control-Allow-Methods GET, POST, PATCH, PUT, DELETE, OPTIONS always;add_header Access-Control-Allow-Headers Content-Type, Accept, Authorization always;add_header Access-Control-Allow-Credentials true always;}# 反向代理到后端具体运行的端口proxy_pass http://localhost:后端实际运行端口;proxy_set_header Host $host;proxy_set_header X-Real-IP $remote_addr; }}
}注意
1前端请求 9090 而不是直接请求后端实际运行端口
2服务器放行 9090 端口这个要注意具体看自己写的是哪个端口
使用 HTTPS
实际测试使用域名 HTTPS 也可以解决
这里看一下大佬写的!!!
教程https://www.code-nav.cn/post/1831983737277050881
BUG
前端使用域名但是前端后端使用 ip 导致 session 设置不上
解决前后端统一要用域名都用域名、IP 都用 IP
还是不行
1)端口是否放行
2)前端请求的端口是否是 Nginx listen 的端口不要直接请求实际端口
