跨域问题和解决办法

跨域

跨域是一种资源共享的安全限制机制.

跨域: 跨域指的是, 浏览器不能执行其他网站的脚本, 是由浏览器的同源策略造成的, 是浏览器对javascript施加的安全限制.

同源策略: 指协议, 域名, 端口都要相同,其中有一个不同都会产生跨域

例子:

URL	说明	是否允许跨域
http://www.a.com/a.js http://www.a.com/b.js	同一域名下	允许
http://www.a.com/lab/a.js http://www.a.com/script/b.js	同一域名下不同文件夹	允许
http://www.a.com:8000/a.js http://www.a.com/b.js	同一域名, 不同端口	不允许
http://www.a.com/a.js https://www.a.com/b.js	同一域名, 不同协议	不允许
http://www.a.com/a.js http://70.32.92.74/b.js	域名和域名对应的ip	不允许
http://www.a.com/a.js http://script.a.com/b.js	主域相同, 子域不同	不允许
http://www.a.com/a.js http://a.com/b.js	同一域名, 不同二级域名(同上)	不允许(cookie这种情况下也不允许访问)
http://www.a.com/a.js http://a.com/b.js	不同域名	不允许

http://localhost:88

预检请求options: 问一下服务器, 如果服务器响应允许跨域, 就发送真实请求给服务器, 服务端响应数据

解决跨域

1. 使用nginx部署为同一域

比如使用一台nginx服务器, 把所有的前端项目都部署进去, 把后台的网关也部署进去

这样访问请求的都是nginx的地址,

静态请求: http://nginx/xxx

动态请求: http://nginx/api/xxx 转发给网关

这样就不会出现跨域问题了

2. 配置当次请求请求允许跨域

可以添加响应头

Access-Control-Allow-Origin 支持哪些来源的请求跨域

Access-Control-Allow-Methods 支持哪些方法跨域

Access-Control-Allow-Credentials 跨域请求默认不包含cookie, 设置为true可以包含cookie

Access-Control-Allow-Headers 跨域请求暴露的字段

Access-Control-Max-Age 表明该响应有效时间

麻烦

2. 也可以在网关里统一配置

使用一个配置文件, 避免麻烦

package com.atguigu.gulimall.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;

@Configuration
public class GulimallCorsConfiguration {

    @Bean
    public CorsWebFilter corsWebFilter(){

        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        CorsConfiguration corsConfiguration = new CorsConfiguration();
        //1.配置跨域
        corsConfiguration.addAllowedHeader("*");
        corsConfiguration.addAllowedMethod("*");
        corsConfiguration.addAllowedOrigin("*");
        corsConfiguration.setAllowCredentials(true);//允许cookie
        source.registerCorsConfiguration("/**", corsConfiguration);
        return new CorsWebFilter(source);//过滤器 解决跨域问题
    }
}

内容整理自谷粒商城项目, bilibili

跨域问题和解决办法

跨域

解决跨域

猜你喜欢