一.前端配置跨域
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; publicclassGlobalCorsConfig { publicCorsFiltercorsFilter() { //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); } }
