文档章节

解决跨域问题,前端 live-server --port=1802 后端启动 localhost:1801,以及解决 vue 的 axios 请求整合

o
 osc_ogi0qclx
发布于 2019/08/23 11:29
字数 1241
阅读 14
收藏 0

精选30+云产品,助力企业轻松上云!>>>


  • 测试的源码文件内容 点击跳转
  •  

     

  •  

     

  •  前端引入 vue.js 与 axios.min.js

    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

     

  • 测试

    1.  

      前端请求 不带 http://

      axios.get("localhost:1801/user/get");
      后端不配置跨域

       前端报错,后台进不去方法

       

    2.  

      前端请求 不带 http://
      axios.get("localhost:1801/user/get");
      后端配置跨域

       前端报错,后台进不去方法

       

    3.  

      前端请求带 http:// 
      
      axios.get("http://localhost:1801/user/get").then((res) =>
      {
          alert("成功")
      }).catch((res) =>
      {
          alert("失败")
      })
      
      
      后端不配置跨域

       

       前端报错,弹框"失败",也就是异常了

      但是,后端方法正常跑完了

       

    4.  

      前端请求带 http:// 
      
      axios.get("http://localhost:1801/user/get").then((res) =>
      {
          alert("成功")
      }).catch((res) =>
      {
          alert("失败")
      })
      
      
      后端配置跨域

       前端正常,弹框"成功",也就是正常访问,正常接收到返回数据了

      后端方法自然也是正常跑完了

       

       


  • 前端,测试在方法 get

     

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <div id="app">
        <input type="button" @click="get" value="get">
        <input type="button" @click="get1" value="get1">
        <input type="button" @click="get2" value="get2">
        <hr/>
        <input type="button" @click="post" value="post">
        <input type="button" @click="post1" value="post1">
        <input type="button" @click="post2" value="post2">
        <hr/>
        <input type="button" @click="del" value="delete">
        <input type="button" @click="del1" value="delete1">
        <input type="button" @click="del2" value="delete2">
        <hr/>
        <input type="button" @click="put" value="put">
        <input type="button" @click="put1" value="put1">
        <input type="button" @click="put2" value="put2">
    </div>
    
    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script>
        new Vue({
            el: "#app",
            data: {
                request_get: {
                    get1_id: "111",
                    get2_id: "222"
                },
                request_post: {
                    post: {
                        username: "我是用户名_post_data",
                        password: "我是密码_post_data",
                    }
                },
                request_delete: {
                    delete1_id: "111",
                    delete2_id: "222"
                },
                request_put: {
                    put: {
                        username: "我是用户名_put_data",
                        password: "我是密码_put_data",
                    }
                },
            },
            methods: {
                get()
                {
                    //axios.get("localhost:1801/user/get");
                    //axios.get("http://localhost:1801/user/get");
                    axios.get("http://localhost:1801/user/get").then((res) =>
                    {
                        alert("成功")
                    }).catch((res) =>
                    {
                        alert("失败")
                    })
                },
                get1()
                {
                    axios.get("http://localhost:1801/user/get1?id=" + this.request_get.get1_id);
                },
                get2()
                {
                    axios.get("http://localhost:1801/user/get2/" + this.request_get.get2_id);
                },
                post()
                {
                    axios.post("http://localhost:1801/user/post");
                },
                post1()
                {
                    /*方式1*/
                    axios.post("http://localhost:1801/user/post1", {
                        "username": "我是用户名_post1_加引号",
                        "password": "我是密码_post1_加引号"
                    });
                    /*方式2*/
                    axios.post("http://localhost:1801/user/post1", {
                        username: "我是用户名__post1_不引号",
                        password: "我是密码_post1_不引号"
                    });
                    /*方式3*/
                    axios.post("http://localhost:1801/user/post1", this.request_post.post);
                },
                post2()
                {
                    /*方式1*/
                    axios.post("http://localhost:1801/user/post2?username=我是用户名_post2_1&password=我是密码_post2_1");
                    /*方式2*/
                    axios.post("http://localhost:1801/user/post2", "username=我是用户名_post2_2&password=我是密码_post2_2");
                    /*方式3*/
                    axios.post("http://localhost:1801/user/post2", "username="+this.request_post.post.username+"&password="+this.request_post.post.password);
    
                },
                del()
                {
                    axios.delete("http://localhost:1801/user/delete");
                },
                del1()
                {
                    axios.delete("http://localhost:1801/user/delete1?id=" + this.request_delete.delete1_id);
                },
                del2()
                {
                    axios.delete("http://localhost:1801/user/delete2/" + this.request_delete.delete2_id);
                },
                put()
                {
                    axios.put("http://localhost:1801/user/put");
                },
                put1()
                {
                    /*方式1*/
                    axios.put("http://localhost:1801/user/put1", {"username": "我是用户名_put1_加引号", "password": "我是密码_put1_加引号"});
                    /*方式2*/
                    axios.put("http://localhost:1801/user/put1", {username: "我是用户名__put1_不引号", password: "我是密码_put1_不引号"});
                    /*方式3*/
                    axios.put("http://localhost:1801/user/put1", this.request_put.put);
                }
            }
        })
    </script>
    </body>
    </html>
    index.html

     

  • 后端

     

     

    • <?xml version="1.0" encoding="UTF-8"?>
      <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
               xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
          <modelVersion>4.0.0</modelVersion>
          <parent>
              <groupId>org.springframework.boot</groupId>
              <artifactId>spring-boot-starter-parent</artifactId>
              <version>2.1.7.RELEASE</version>
              <relativePath/> <!-- lookup parent from repository -->
          </parent>
          <groupId>com.example</groupId>
          <artifactId>test_01</artifactId>
          <version>0.0.1-SNAPSHOT</version>
          <name>test_01</name>
          <description>Demo project for Spring Boot</description>
      
          <properties>
              <java.version>1.8</java.version>
          </properties>
      
          <dependencies>
              <dependency>
                  <groupId>org.springframework.boot</groupId>
                  <artifactId>spring-boot-starter-web</artifactId>
              </dependency>
      
              <dependency>
                  <groupId>org.projectlombok</groupId>
                  <artifactId>lombok</artifactId>
                  <version>1.18.8</version>
              </dependency>
      
      
          </dependencies>
      
          <build>
              <plugins>
                  <plugin>
                      <groupId>org.springframework.boot</groupId>
                      <artifactId>spring-boot-maven-plugin</artifactId>
                  </plugin>
              </plugins>
          </build>
      
      </project>
      pom.xml

       

    • server.port=1801
      application.properties

       

    • package panfeng;
      
      import org.springframework.boot.SpringApplication;
      import org.springframework.boot.autoconfigure.SpringBootApplication;
      
      @SpringBootApplication
      public class Test01Application
      {
          public static void main(String[] args)
          {
              SpringApplication.run(Test01Application.class, args);
          }
      }
      Test01Application.java

       

    • package panfeng.config;
      
      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;
      /*
       * 描述:配置跨域
       * 【时间 2019-08-23 10:52 作者 陶 攀 峰】
       */
      @Configuration
      public class MyCors
      {
          @Bean
          // import org.springframework.web.filter.CorsFilter;
          public CorsFilter corsFilter()
          {
              CorsConfiguration config = new CorsConfiguration();
              // 添加允许信任域名
              // 1) 允许跨域的域名,不要写*,否则cookie就无法使用了,*表示所有域名都可跨域访问
              // live-server --port=1802
              config.addAllowedOrigin("http://127.0.0.1:1802");//浏览器顶部搜索框http://localhost:1802/
              config.addAllowedOrigin("http://localhost:1802");//浏览器顶部搜索框http://127.0.0.1:1802/
              // 2) 是否发送Cookie信息
              config.setAllowCredentials(true);
              // 3) 允许的请求方式
              // *表示所有请求方式:GET POST DELETE PUT...
              config.addAllowedMethod("*");
              // 4) 允许的头信息
              config.addAllowedHeader("*");
              // 初始化cors数据源对象
              // import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
              UrlBasedCorsConfigurationSource configurationSource = new UrlBasedCorsConfigurationSource();
              configurationSource.registerCorsConfiguration("/**", config);
              // 返回CorsFilter实例,参数:cors配置源对象
              return new CorsFilter(configurationSource);
          }
      }
      MyCors.java

       

    • package panfeng.entity;
      
      import lombok.AllArgsConstructor;
      import lombok.Data;
      import lombok.NoArgsConstructor;
      import org.hibernate.validator.constraints.Length;
      
      @Data
      @NoArgsConstructor
      @AllArgsConstructor
      public class User
      {
          private String username;
          private String password;
          private int age;
      }
      User.java

       

    • package panfeng.controller;
      
      
      import org.springframework.http.ResponseEntity;
      import org.springframework.stereotype.Controller;
      import org.springframework.web.bind.annotation.*;
      import panfeng.entity.User;
      
      @Controller
      @RequestMapping("user")
      public class UserController
      {
          @GetMapping("get")
          public ResponseEntity<String> get()
          {
              System.out.println("get...");
              return ResponseEntity.ok("w s return");
          }
      
          @GetMapping("get1")
          public void get1(@RequestParam("id") Integer id)
          {
              System.out.println("get1..." + id);
          }
      
          @GetMapping("get2/{id}")
          public void get2(@PathVariable("id") Integer id)
          {
              System.out.println("get2..." + id);
          }
      
          @PostMapping("post")
          public void post()
          {
              System.out.println("post...");
          }
      
          @PostMapping("post1")
          public void post1(@RequestBody(required = false) User user)
          {
              System.out.println("post1..." + user);
          }
      
          @PostMapping("post2")
          public void post2(@RequestParam("username") String username, @RequestParam("password") String password)
          {
              System.out.println("post2..." + username + "---" + password);
          }
      
          @DeleteMapping("delete")
          public void delete()
          {
              System.out.println("delete...");
          }
      
          @DeleteMapping("delete1")
          public void delete1(@RequestParam("id") Integer id)
          {
              System.out.println("delete1..." + id);
          }
      
          @DeleteMapping("delete2/{id}")
          public void delete2(@PathVariable("id") Integer id)
          {
              System.out.println("delete1..." + id);
          }
      
          @PutMapping("put")
          public void put()
          {
              System.out.println("put...");
          }
      
          @PutMapping("put1")
          public void put1(@RequestBody(required = false) User user)
          {
              System.out.println("put1..." + user);
          }
      
      
      }
      UserController.java

       


大坑

都要配置,如果只配置了localhost 顶部栏为127.0.0.1的时候就会报跨域的错误

 

o
粉丝 0
博文 500
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。
前后端分离 Spring Boot + Vue 开发单页面应用 个人总结(二)

前后端分离 Spring Boot + Vue 开发单页面应用 个人总结(二) 2018/01/30 更新 关于跨域:在实际开发过程中,发现跨域问题并不是那么好解决的 因为Springboot安全控制框架使用了Securtiy,它的...

BekeyChao
2017/12/22
9.7K
5
Vue 兼容 ie9 的全面解决方案

前言 背景情况 vue - 2.5.11 vue-cli 使用模板 http请求:axios Vue 官方对于 ie 浏览器版本兼容情况的描述是 ie9+,即是 ie9 及更高的版本。经过测试,Vue 的核心框架 本身,以及生态的官方...

TerryZ
2018/06/19
5K
16
前后端分离————VUE+node(express)

前后端分离————VUE+node(express) vue作为前端的框架,node(express)作为后端的框架。无数据库,使用端口保存数据。 VUE: 使用vue-cli构建vue项目(vueapp)。 axios:(与ajax相似) ...

osc_o1mwzw8v
04/16
5
0
vue+django分离开发的思想和跨域问题的解决

一、介绍 在前后端分离的开发过程中,会涉及到跨域的问题,比如本次个人使用的Django+vue的框架,在vue对Django进行响应,Django再将响应的数据返回给vue,vue在进行渲染,如果不设置跨域,数...

osc_cppluta2
2019/11/15
13
0
一篇文章带你了解axios网络交互-Vue

作者 Jeskson 来源 达达前端小酒馆 1 什么是axios呢?了解,并去使用它,对于axios发送请求的两种方式有何了解,以及涉及axios跨域问题如何解决。 对于axios网络交互,去使用axios的同时,首...

达达前端小酒馆
2019/12/21
21
0

没有更多内容

加载失败,请刷新页面

加载更多

为什么从HBase的0.96版本开始,舍弃了-ROOT-文件?

HBase结构的读写流程 (1). HBase0.96版本之前: (2). HBase0.96开始: a. 当客户端获取到.meta文件的位置之后,会缓存.meta.文件的位置 b. 客户端还会缓存HRegion的位置 -ROOT-存在的意义: ...

其乐m
今天
18
0
volatile关键字对 - What is the volatile keyword useful for

问题: At work today, I came across the volatile keyword in Java. 今天的工作中,我遇到了Java中的volatile关键字。 Not being very familiar with it, I found this explanation: 不太熟......

技术盛宴
今天
25
0
golang 封装 mysql 和 redis 连接

Mysql封装 package dbimport ("fmt"_ "github.com/go-sql-driver/mysql""github.com/jmoiron/sqlx")var DB *sqlx.DBfunc init(){database, err := sqlx.Op......

开源中国最牛的人
今天
21
0
pdfbox 读取文件报错 java.io.IOException: Page tree root must be a dictionary

pdfbox java.io.IOException: Page tree root must be a dictionary 示例代码 public static void main(String[] args) { try (InputStream sampleInputs = new ClassPathResource("s......

lemos
今天
28
0
整理 Linux下列出目录内容的命令

在 Linux 中,有非常多的命令可以让我们用来执行各种各样的任务。当我们想要像使用文件浏览器一样列出一个目录下的内容时,大家第一时间想到的是 ls 命令。但只有 ls 命令能实现这个目的吗?...

良许Linux
今天
17
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部