一.前端配置跨域

• 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 {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 {@Beanpublic 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);}
}

还有好几种但是常用的也就是这几种，小伙伴们有啥需要补充的评论区留言。