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

一.前端配置跨域

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);
    }
}

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

相关推荐
喵先生!23 分钟前
C++中的vector和list的区别与适用场景
开发语言·c++
Nelson_hehe1 小时前
Java基础第四章、面向对象
java·语法基础·面向对象程序设计
Thomas_YXQ1 小时前
Unity3D Lua集成技术指南
java·开发语言·驱动开发·junit·全文检索·lua·unity3d
xMathematics1 小时前
计算机图形学实践:结合Qt和OpenGL实现绘制彩色三角形
开发语言·c++·qt·计算机图形学·cmake·opengl
ShiinaMashirol2 小时前
代码随想录打卡|Day27(合并区间、单调递增的数字、监控二叉树)
java·算法
Freedom风间2 小时前
前端优秀编码技巧
前端·javascript·代码规范
萌萌哒草头将军3 小时前
🚀🚀🚀 Openapi:全栈开发神器,0代码写后端!
前端·javascript·next.js
萌萌哒草头将军3 小时前
🚀🚀🚀 Prisma 爱之初体验:一款非常棒的 ORM 工具库
前端·javascript·orm
拉不动的猪3 小时前
SDK与API简单对比
前端·javascript·面试
东阳马生架构3 小时前
Nacos简介—3.Nacos的配置简介
java