项目里面怎么解决跨域的?-阿里云开发者社区

项目里面怎么解决跨域的?

2023-08-29 52

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 项目里解决跨域的方法

一.前端配置跨域

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/', // 要代理的服务器地址  这里不用写 apichangeOrigin: true// 是否跨域// 重写路径// pathRewrite: {}      }
    }
  },

Nginx反向代理

在nginx.conf 的配置

server {
listen8094; #监听端口server_namelocalhost; ##charset koi8-r;#access_log  logs/host.access.log  main;location/ {
roothtml;#文件根目录indexindex.html ;#默认起始页      }

jsonp解决跨域

Jsonp 原理：动态获取script标签缺点：只适用于get请求。

二.后端解决跨域

cors解决跨域（后端常用 java）

importorg.springframework.context.annotation.Bean;
importorg.springframework.context.annotation.Configuration;
importorg.springframework.web.cors.CorsConfiguration;
importorg.springframework.web.cors.UrlBasedCorsConfigurationSource;
importorg.springframework.web.filter.CorsFilter;
@ConfigurationpublicclassGlobalCorsConfig {
@BeanpublicCorsFiltercorsFilter() {
//1.添加CORS配置信息CorsConfigurationconfig=newCorsConfiguration();
//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.添加映射路径，我们拦截一切请求UrlBasedCorsConfigurationSourceconfigSource=newUrlBasedCorsConfigurationSource();
configSource.registerCorsConfiguration("/**", config);
//3.返回新的CorsFilter.returnnewCorsFilter(configSource);
    }
}