山西网站建站系统哪家好_做一个网购平台多少钱_北京seo工程师_做推广哪个平台效果好

Access to XMLHttpRequest at 'http://localhost:7777/dev-api/renren-fast/sys/login' from origin 'http://localhost:8001' 
has been blocked by CORS policy: 
Response to preflight request doesn't pass access control check: 
No 'Access-Control-Allow-Origin' header is present on the requested resource.

前端开发者经常会被这个问题困扰. 下面就来讲个这个问题.

是什么
为什么
怎么办
3.1 vue
3.2 nginx
3.3 springmvc
3.4 gateway

1. CORS本质

跨源资源共享（CORS，或通俗地译为跨域资源共享）是一种基于 HTTP 头的机制，
该机制通过允许服务器标示除了它自己以外的其他源（域、协议或端口），
使得浏览器允许这些源访问加载自己的资源。
跨源资源共享还通过一种机制来检查服务器是否会允许要发送的真实请求，
该机制通过浏览器发起一个到服务器托管的跨源资源的“预检”请求。
在预检中，浏览器发送的头中标示有 HTTP 方法和真实请求中会用到的头。

发生跨域的条件

简单来讲就是网络访问跨域了. 默认只能进行同源访问. 只要协议、主机、端口有一个不同, 就会跨域.

http https 跨域
baidu.com 39.156.66.10 域名\ip跨域
主域相同,子域不同 www.a.com script.a.com 跨域
测试的时候, localhost\127.0.0.1 也会出现跨域

允许跨域的请求—简单请求

并不是所有的跨域都会默认被拦截.

简单get、head、post(Content-Type 限定为text/plain、multipart/form-data、application/x-www-form-urlencoded)并且没有设置自定义请求头, 默认不会被拦截.

了解详情

跨域请求的交互方式

相对于简单请求, 跨域请求会先发送一个options请求.
请添加图片描述相当于询问服务器, 我能进行XX请求吗? 请求地址、请求头（有点像函数签名）

针对options请求, 服务端添加一些特有的响应头.
请添加图片描述

2. 浏览器为什么要限制跨域

出于安全性，浏览器限制脚本内发起的跨源 HTTP 请求。

3. 解决方案

1. vue配置代理

这种在开发式比较常用, 一般在vue.config.js中配置

    module.exports = {devServer: {proxy: {'/proxyApi': {target: 'http://demo.renren.io/renren-fast/, // 目标服务器changeOrigin: true,   // 是否改变源pathRewrite: { '^/proxyApi': '' }  // 路径重写}}}};

2. nginx 处理

部署在同一个域

请添加图片描述

将前端项目和后端项目放在一起，作为同一个域,当然不存在跨域的问题.

nginx 配置cors

    location /dev-api/ {# 预见请求,单独处理if ($request_method = 'OPTIONS') {add_header 'Access-Control-Allow-Origin' 'http://localhost:8001';add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';add_header 'Access-Control-Allow-Credentials' 'true';add_header 'Access-Control-Allow-Headers' 'token,DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization';# add_header 'Access-Control-Allow-Headers' '*';  preflight response not support *.add_header 'Access-Control-Max-Age' 1728000;add_header 'Content-Type' 'text/plain charset=UTF-8';add_header 'Content-Length' 0;return 204;}# 其他请求  post  get  ...proxy_pass http://127.0.0.1:18080/;add_header 'Access-Control-Allow-Origin' 'http://localhost:8001';add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE, OPTIONS';add_header 'Access-Control-Allow-Headers' '*'; # okadd_header 'Access-Control-Allow-Credentials' 'true';}

根据项目不同会有不同的提示. 根据提示进行add_header参数的调整即可.
请添加图片描述这个说的是options(preflight response)响应中 Access-Control-Allow-Headers 没有content-type.

请添加图片描述这个说的是options(preflight response)响应中 Access-Control-Allow-Origin 没有设置.(ps. 这个只能写具体的域)

请添加图片描述
这个说的是options(preflight response)响应中 Access-Control-Allow-Headers 没有token.

重要的是不要紧张,一步步调试分析.

3. springmvc 配置

package io.renren.config;import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;@Configuration
public class CorsConfig implements WebMvcConfigurer {@Overridepublic void addCorsMappings(CorsRegistry registry) {registry.addMapping("/**").allowedOriginPatterns("*").allowCredentials(true).allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS").maxAge(3600);}
}

添加上述代码, 进行自动注入即可.
看网上的答案,有的没有写options方法,那肯定不对.

4. gateway 配置

对于使用gateway的项目, 需要将内部项目的cors配置去掉. 否则会进行重复添加.

添加如下代码,配置跨域.

package com.atguigu.gulimail.gateway.config;import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.reactive.CorsWebFilter;
import org.springframework.web.cors.reactive.UrlBasedCorsConfigurationSource;import java.util.Arrays;@Configuration
public class CorsConfig {@Beanpublic CorsWebFilter corsFilter() {CorsConfiguration config = new CorsConfiguration();// 允许的来源域名config.setAllowedOriginPatterns(Arrays.asList("http://localhost:8001"  // 前端请求的域名
//            "https://localhost:10086" // 后端服务的域名));// 允许的请求方法config.addAllowedMethod("*");// 允许的请求头config.addAllowedHeader("*");// 允许携带凭证（如 cookies）config.setAllowCredentials(true);// 允许的响应头config.addExposedHeader("*");// 预检请求的有效期config.setMaxAge(3600L);UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();// 应用 CORS 配置到所有路径source.registerCorsConfiguration("/**", config);return new CorsWebFilter(source);}
}

参考内容

mozilla cors

谷粒商城