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

一.前端配置跨域

proxy解决跨域

在vue.config.js中通过proxy devServer中配置反向代理。

javascript 复制代码
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 的配置

javascript 复制代码
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解决跨域(后端常用)
java 复制代码
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);
    }
}

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

相关推荐
程序媛学姐3 分钟前
SpringKafka错误处理:重试机制与死信队列
java·开发语言·spring·kafka
cypking12 分钟前
解决 axios get请求瞎转义问题
vue.js
2401_8401922712 分钟前
如何学习一门计算机技术
开发语言·git·python·devops
向阳25620 分钟前
SpringBoot+vue前后端分离整合sa-token(无cookie登录态 & 详细的登录流程)
java·vue.js·spring boot·后端·sa-token·springboot·登录流程
巷北夜未央26 分钟前
Python每日一题(14)
开发语言·python·算法
艾克马斯奎普特26 分钟前
Vue.js 3 渐进式实现之响应式系统——第一节:系列开篇与响应式基本实现
vue.js
梅子酱~30 分钟前
Vue 学习随笔系列二十二 —— 表格高度自适应
javascript·vue.js·学习
你的人类朋友34 分钟前
JS严格模式,启动!
javascript·后端·node.js
XiaoLeisj37 分钟前
【MyBatis】深入解析 MyBatis XML 开发:增删改查操作和方法命名规范、@Param 重命名参数、XML 返回自增主键方法
xml·java·数据库·spring boot·sql·intellij-idea·mybatis
风象南38 分钟前
SpringBoot实现数据库读写分离的3种方案
java·spring boot·后端