解決跨域問題,前端 live-server --port=1802 後端啓動 localhost:1801,以及解決 vue 的 axios 請求整合

時間  2019-11-13
標籤 解決 問題 前端 live server port 後端 啓動 localhost 以及 vue axios 請求 整合 简体版
原文   原文鏈接
  • 測試的源碼文件內容 點擊跳轉

  •  

     

  •  

     

  •  前端引入 vue.js 與 axios.min.jscss

    <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");
      
後端不配置跨域

       前端報錯,後臺進不去方法html

       

    2.  

      前端請求 不帶 http://
      axios.get("localhost:1801/user/get");
      
後端配置跨域

       前端報錯,後臺進不去方法前端

       

    3.  

      前端請求帶 http:// 

axios.get("http://localhost:1801/user/get").then((res) =>
{
    alert("成功")
}).catch((res) =>
{
    alert("失敗")
})


後端不配置跨域

       

       前端報錯,彈框"失敗",也就是異常了vue

      可是,後端方法正常跑完了java

       

    4.  

      前端請求帶 http:// 

axios.get("http://localhost:1801/user/get").then((res) =>
{
    alert("成功")
}).catch((res) =>
{
    alert("失敗")
})


後端配置跨域

       前端正常,彈框"成功",也就是正常訪問,正常接收到返回數據了ios

      後端方法天然也是正常跑完了web

       

       

  • 前端,測試在方法 getspring

     

    <!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

     

  • 後端apache

     

     

    • <?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的時候就會報跨域的錯誤axios

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程