项目场景:
部署KY-API开放平台。(线上,已部署ssl证书)
项目介绍:提供 API 接口供开发者调用的平台,基于 Spring Boot 后端 + React 前端的 全栈微服务项目。
附开源链接
KY-0426/kyapi-backend (github.com)https://github.com/KY-0426/kyapi-backend
问题描述
点击接口详情,跳转登录页面。
如下图所示:
原因分析:
set-cookies 不生效所导致的。就是跨域的问题 CORS
解决方案:
一、后端
springboot 修改application-prod.yml
server:
servlet:
session:
cookie:
max-age: 2592000
domain: www.XXXXX.top (真实域名)
# 这样写就跨域写入到 session 之中了
same-site: none
# 必须是 https 才能设置 可以用 Ohttps 配合 Nginx 实现
secure: true
springboot 添加 全局跨域配置 CorsConfig.java
二、前端
打开 RequestConfig.ts
1. 设置 withCredentials: true,
2. baseURL为后台https带域名网址。
三、NGINX
修改/nginx/conf/nginx.config 文件
添加
worker_processes 1;
events {
worker_connections 1024;
}
http {
include mime.types;
default_type application/octet-stream;
sendfile on;
keepalive_timeout 65;
server {
listen 443 ssl;
server_name www.wenkaiyu.top;
#填写证书文件绝对路径
ssl_certificate cert/XXXX.pem;
#填写证书私钥文件绝对路径
ssl_certificate_key cert/XXXXXX.key;
ssl_session_cache shared:SSL:1m;
ssl_session_timeout 5m;
#表示优先使用服务端加密套件。默认开启
ssl_prefer_server_ciphers on;
# 现代TLS配置
ssl_protocols TLSv1.2 TLSv1.3; # 仅允许TLSv1.2和TLSv1.3
ssl_ciphers 'ECDHE-ECDSA-AES128-GCM-SHA256:ECDHE-RSA-AES128-GCM-SHA256:ECDHE-ECDSA-AES256-GCM-SHA384:ECDHE-RSA-AES256-GCM-SHA384:DHE-RSA-AES128-GCM-SHA256:DHE-RSA-AES256-GCM-SHA384:ECDHE-ECDSA-CHACHA20-POLY1305:ECDHE-RSA-CHACHA20-POLY1305:DHE-RSA-CHACHA20-POLY1305:ECDHE-ECDSA-AES128-SHA256:ECDHE-RSA-AES128-SHA256:ECDHE-ECDSA-AES128-SHA:ECDHE-RSA-AES256-SHA384:ECDHE-RSA-AES128-SHA:ECDHE-ECDSA-AES256-SHA384:ECDHE-ECDSA-AES256-SHA:DHE-RSA-AES256-SHA256:DHE-RSA-AES128-SHA256:DHE-RSA-AES256-SHA:DHE-RSA-AES128-SHA:AES128-GCM-SHA256:AES256-GCM-SHA384:AES128-SHA256:AES256-SHA256:AES128-SHA:AES256-SHA:DES-CBC3-SHA'; # 推荐的加密套件
location / {
root /service/kyapi-frontend;
index index.html index.htm;
# 用于配合 browserHistory 使用
try_files $uri $uri/index.html /index.html;
}
location /api {
add_header 'Access-Control-Allow-Origin' '117.XX.XXX.XX';
add_header 'Access-Control-Allow-Headers' 'Origin, X-Requested-With, Content-Type, Accept, Authorization, Accept-Language';
add_header 'Access-Control-Allow-Credentials' 'true';
add_header 'Access-Control-Allow-Methods' 'GET,POST,PUT,DELETE';
rewrite ^/api/(.*) /$1 break;
proxy_pass https://www.XXXXXX.top/api;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
}
server {
listen 80;
server_name www.XXXXXX.top;
# 将所有HTTP请求重定向到HTTPS
return 301 https://$server_name$request_uri;
}
}
修改完后 进入nginx 目录的 sbin 执行 ./nginx -s reload 让配置生效。
重新登录测试成功
参考文章
SpringBoot设置Cors跨域的四种方式 - 简书前言:CorsFilter / WebMvcConfigurer / @CrossOrigin 需要SpringMVC 4.2 以上的版本才支持,对应SpringBoot 1...https://www.jianshu.com/p/b02099a435bd
服务器无法set-cookie · 语雀首先看看 login 接口对应的网络请求有没有 ⚠️,...https://www.yuque.com/leikooo/wskip4/sa445dy75lve6iw1?singleDoc#
我之前微信小程序登录问题