项目里面怎么解决跨域的?
一.前端配置跨域
-
proxy解决跨域
在vue.config.js中通过proxy devServer中配置反向代理。
devServer: {
port: port,
open: true,
overlay: {
warnings: false,
errors: true
},
// 配置反向代理
proxy: {
// 当地址中有/api的时候会触发代理机制
'/api': {
target: 'http://ihrm-java.itheima.net/', // 要代理的服务器地址 这里不用写 api
changeOrigin: true // 是否跨域
// 重写路径
// pathRewrite: {}
}
}
},
-
Nginx反向代理
在nginx.conf 的配置
server {
listen 8094; #监听端口
server_name localhost; #
#charset koi8-r;
#access_log logs/host.access.log main;
location / {
root html;#文件根目录
index index.html index.htm;#默认起始页
}
-
jsonp解决跨域
Jsonp 原理:动态获取script标签 缺点:只适用于get请求
-
cors解决跨域(后端常用)
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;
@Configuration
public class GlobalCorsConfig {
@Bean
public CorsFilter corsFilter() {
//1.添加CORS配置信息
CorsConfiguration config = new CorsConfiguration();
//1) 允许的域,不要写*,否则cookie就无法使用了
config.addAllowedOrigin("http://manage.leyou.com");
config.addAllowedOrigin("http://www.leyou.com");
//2) 是否发送Cookie信息
config.setAllowCredentials(true);
//3) 允许的请求方式
config.addAllowedMethod("OPTIONS");
config.addAllowedMethod("HEAD");
config.addAllowedMethod("GET");
config.addAllowedMethod("PUT");
config.addAllowedMethod("POST");
config.addAllowedMethod("DELETE");
config.addAllowedMethod("PATCH");
// 4)允许的头信息
config.addAllowedHeader("*");
//2.添加映射路径,我们拦截一切请求
UrlBasedCorsConfigurationSource configSource = new UrlBasedCorsConfigurationSource();
configSource.registerCorsConfiguration("/**", config);
//3.返回新的CorsFilter.
return new CorsFilter(configSource);
}
}
还有好几种但是常用的也就是这几种,小伙伴们有啥需要补充的评论区留言。