国外红色企业网站,php网站上做微信支付功能,深圳网站建设哪家好,比价 wordpress 插件下载跨域问题
官方概念#xff1a;
当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域本质来说#xff0c;是前端请求给到后端时候#xff0c;请求头里面#xff0c;有一个 Origin #xff0c;会带上 协议域名端口号等#xff1b;后端接受到请求
当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域本质来说是前端请求给到后端时候请求头里面有一个 Origin 会带上 协议域名端口号等后端接受到请求如果没有在“返回头”里面放上“一些东西”返回的时候浏览器根据“同源策略”就不会接受到返回 注意
Sec-Fetch-Site 头部有几个可能的值same-origin: 请求源和目标是同一个站点same-site: 请求源和目标在同一个站点组比如 sub1.example.com 和 sub2.example.comcross-site: 跨站点请求none: 请求不是由网站发起的比如用户直接在地址栏输入URL
我们来看两个例子 这张是微博的任意页面刷新出来的东西 这一个请求就没有跨域啥的 然后我们看一个 B站的例子 其实涉及到两个概念
Origin例如https://www.bilibili.comHost 例如https://data.bilibili.com
Origin是发出方。Host是目的地这里可以看上面请求里B站的Host
解决
后端返回的头里加上一个允许标记给放过 代码仅供参考实际要根据业务需求情况还有一些其他配置这里关注config.addAllowedOrigin(http://localhost:3000);
// 方案1后端配置 CORS跨域资源共享
Configuration
public class CorsConfig {Beanpublic CorsFilter corsFilter() {CorsConfiguration config new CorsConfiguration();// 生产环境应该明确指定允许的域名config.addAllowedOrigin(https://www.your-domain.com);// 如果有多个域名可以分别添加config.addAllowedOrigin(https://admin.your-domain.com);// 明确指定允许的请求方法而不是使用 *config.addAllowedMethod(GET);config.addAllowedMethod(POST);config.addAllowedMethod(PUT);config.addAllowedMethod(DELETE);// 明确指定允许的头部而不是使用 *config.addAllowedHeader(Authorization);config.addAllowedHeader(Content-Type);// 是否允许发送Cookieconfig.setAllowCredentials(true);// 预检请求的有效期单位为秒config.setMaxAge(3600L);UrlBasedCorsConfigurationSource source new UrlBasedCorsConfigurationSource();source.registerCorsConfiguration(/api/**, config);return new CorsFilter(source);}
}
从前端也可以处理生产环境的话可以在Nginx里面配置
server {listen 80;server_name example.com;# 前端静态文件location / {root /path/to/dist;try_files $uri $uri/ /index.html;}# 后端 API 代理location /api {# 跨域配置add_header Access-Control-Allow-Origin *; # 生产环境建议配置具体域名add_header Access-Control-Allow-Methods GET, POST, OPTIONS;add_header Access-Control-Allow-Headers DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization;# 处理 OPTIONS 预检请求if ($request_method OPTIONS) {return 204;}# 反向代理配置proxy_pass http://localhost:8080;proxy_set_header Host $host;proxy_set_header X-Real-IP $remote_addr;}
}时光海海日常焦虑 加油
