Vue3:解决基地址不同 数据交互http与https跨域问题

配置公共管理的api文件和vue.config.js可以解决跨域问题。一个项目对接不同的基地址和接口同理。

api

export default {
  //接口基地址
  Millia: process.env.NODE_ENV == 'development' ? location.protocol + '//' + location.host + '/milliaApi' : 'http://xx.xxx.xxxx/index.php/',
  MilliaStudy:process.env.NODE_ENV=='development'?location.protocol+'//'+location.host+'/MilliaStudyApi':'https://xx.xxx.xxxx/xxx',


  //不同接口
  GETREC:'api/XXXXX',
  GETCATEGORY:'api/XXXX',
}

vue.config.js

//devServer 是一个本地开发服务器,会自动监听变化,自动打包构建,自动更新刷新浏览器
  devServer: {
    hot: true, //热加载
    host: 'localhost',
    port: 8080, //端口
    https: false, //false关闭https,true为开启
    open: true, //自动打开浏览器
    proxy: {
      '/milliaApi': {
        target: 'https://xx.xxx.xxxx/',
        ws: true,
        changeOrigin: true,
        pathRewrite: {
          '^/milliaApi': '/'
        }
      },
      '/MilliaStudyApi': {
        target: 'http://xx.xxx.xxxx/xxx',
        ws: true,
        changeOrigin: true,
        pathRewrite: {
          '^/MilliaStudyApi': '/'
        }
      },
    }
  },

基地址对应不同的http协议(http和https),线上项目会报错

方法一:

去除api和vue.config.js里 http: 和 https: 不会报错但是有

方法二:

不修改api和vue.config.js,修改public文件夹里的index.html在head中添加

<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,下面是解决 Spring Boot 与 Vue 跨域问题的一种方法。 首先,在 Spring Boot 的后端代码里,我们需要在 Controller 上添加 `@CrossOrigin` 注解,来允许跨域访问。示例代码如下: ```java @RestController @CrossOrigin(origins = "*", maxAge = 3600) public class HelloController { @GetMapping("/hello") public String hello() { return "Hello, world!"; } } ``` 其中 `@CrossOrigin(origins = "*", maxAge = 3600)` 表示允许所有来源的跨域访问,并设置了缓存时间为 3600 秒。 然后,在 Vue 的前端代码里,我们需要在 Axios 请求中设置 `withCredentials: true`,来开启跨域请求。示例代码如下: ```javascript axios.get('http://localhost:8080/hello', { withCredentials: true }) .then(response => { console.log(response.data) }) .catch(error => { console.log(error) }) ``` 其中 `withCredentials: true` 表示允许发送跨域凭证,例如 Cookie 等。 最后,在 Spring Boot 的后端代码里,我们需要添加一个 Filter,来允许前端发送跨域凭证。示例代码如下: ```java @Configuration public class CorsConfig { @Bean public FilterRegistrationBean corsFilter() { UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource(); CorsConfiguration config = new CorsConfiguration(); config.setAllowCredentials(true); config.addAllowedOrigin("*"); config.addAllowedHeader("*"); config.addAllowedMethod("*"); source.registerCorsConfiguration("/**", config); FilterRegistrationBean bean = new FilterRegistrationBean(new CorsFilter(source)); bean.setOrder(Ordered.HIGHEST_PRECEDENCE); return bean; } } ``` 其中 `config.setAllowCredentials(true)` 表示允许发送跨域凭证。 以上就是解决 Spring Boot 与 Vue 跨域问题的一种方法,希望能够帮到您。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值