跨域请求被 CORS 策略阻止：请求的资源上存在“Access-Control-Allow-Origin”标头。

跨域解决

YIZHILANGOU_

6528人浏览 · 2022-08-16 22:42:43

YIZHILANGOU_ · 2022-08-16 22:42:43 发布

跨域请求资源被阻止

做b站谷粒学苑小项目,在网上下载的vue-admin-template4.4.0模板在vscode打开并替换登录请求地址时,
vue中使用的端口为9528,而登录请求访问的地址在根目录的.env.development文件中改为了http://localhost:8001,这样请求的路径也就会自动引入到8001端口的路径.但是这个时候却一直登录不上去,直接在浏览器中访问登录请求的url地址时可以获得对应的信息,状态码为20001,报错了:

Access to XMLHttpRequest at ‘http://localhost:8001/eduService/user/login’ from origin ‘http://localhost:9528’ 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.
Access to XMLHttpRequest at ‘http://localhost:8001/eduService/user/login’ from origin ‘http://localhost:9528’ 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.
285 / 5,000
翻译结果
从源“http://localhost:9528”访问“http://localhost:8001/eduService/user/login”的 XMLHttpRequest 已被 CORS 策略阻止：对预检请求的响应未通过访问控制检查：否请求的资源上存在“Access-Control-Allow-Origin”标头。

在网上查了一下,
跨域请求需要在控制层中添加@CrossOrigin注解
然后就立马解决了
------------------分界线------------------------------------------------
2022年9月19日 23:29:32补充
在使用nginx的情况下有时候出现请求跨域报错还有可能是请求转发中转发地址错误或者没有对应的转发地址,请求方式与后端路由地址不对应或者后端干脆就没有标明请求方式,都有可能
今天遇到的请求跨域报错是因为nginx中配置文件的地址没有标明,如下:

location ~ /eduservice/ {
		        proxy_pass http://localhost:8001;
		}

nginx监听的端口为9001,我这里请求的路由地址是/eduoss/fileoss/,本来应该这个路由地址对应的是8002端口,但是我这里傻了吧唧的就写了这么一个路由跳转,然后就一直被识别为请求跨域报错,一开始我以为是请求方式的错误,因为在F12中看到请求方式为option,按照网上的博客修改了配置文件,然后就没有报错跨域,但是F12中的network依然报错,后来才发现是nginx的路由没有写全,少了以下的内容导致资源一直无法加载

location ~ /eduoss/ {
		        proxy_pass http://localhost:8002;
		}

这里我把nginx压制请求跨域的的配置也写上了:

        location / {
		    add_header 'Access-Control-Allow-Origin' '*' always;
            add_header 'Access-Control-Allow-Credentials' 'true';
            add_header 'Access-Control-Allow-Methods' 'GET, POST, PATCH, DELETE, PUT, OPTIONS';
	        add_header 'Access-Control-Allow-Headers' 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type, X-Custom-Header, Access-Control-Expose-Headers, Token, Authorization';
	        add_header 'Access-Control-Allow-Headers'  '*';
            add_header 'Access-Control-Max-Age' 1728000;
			
            if ($request_method = 'OPTIONS') {
            return 204;
            }
            root   html;
            index  index.html index.htm;
        }

借鉴博主文章:
https://blog.csdn.net/weixin_39755873/article/details/111093892