解决跨域问题,前端 live-server --port=1802 后端启动 localhost:1801,以及解决 vue 的 axios 请求整合
- 测试的源码文件内容点击跳转
前端引入 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>测试
前端请求 不带 http:// axios.get("localhost:1801/user/get");
后端不配置跨域前端报错,后台进不去方法
前端请求 不带 http://
axios.get("localhost:1801/user/get");
后端配置跨域前端报错,后台进不去方法
前端请求带 http:// axios.get("http://localhost:1801/user/get").then((res) =>
{
alert("成功")
}).catch((res) =>
{
alert("失败")
}) 后端不配置跨域前端报错,弹框"失败",也就是异常了
但是,后端方法正常跑完了
前端请求带 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的时候就会报跨域的错误
解决跨域问题,前端 live-server --port=1802 后端启动 localhost:1801,以及解决 vue 的 axios 请求整合的更多相关文章
- Vue 本地代理 纯前端技术解决跨域
vue-axios获取数据很多小伙伴都会使用,但如果前后端分离且后台没设置跨域许可,那要怎样才能解决跨域问题? 常用方法有几种: 通过jsonp跨域 通过修改document.domain来跨子域 使 ...
- Nginx+Springboot+Vue 前后端分离 解决跨域问题
1:前端vue 写完 打包 npm run build prod 2: 后端api 写完打包 springboot mvn package -Dmaven.test.skip=true 3: ngin ...
- 如何用Nginx解决跨域问题
一. 产生跨域的原因 1.浏览器限制 2.跨域 3.XHR(XMLHttpRequest)请求 二. 解决思路 解决跨域有多重,在这里主要讲用nginx解决跨域 1.JSONP 2.nginx代理 3 ...
- 使用Access-Control-Allow-Origin解决跨域
什么是跨域 当两个域具有相同的协议(如http), 相同的端口(如80),相同的host(如www.google.com),那么我们就可以认为它们是相同的域(协议,域名,端口都必须相同). 跨域就指着 ...
- 一步一步学习SignalR进行实时通信_3_通过CORS解决跨域
原文:一步一步学习SignalR进行实时通信_3_通过CORS解决跨域 一步一步学习SignalR进行实时通信\_3_通过CORS解决跨域 SignalR 一步一步学习SignalR进行实时通信_3_ ...
- proxyTable 解决跨域问题
1.使用 proxyTable(地址映射表)解决跨域问题(即通过设置代理解决跨域问题): 可以通过设置将复杂的url简化,例如我们要请求的地址是api.xxxxxxxx.com/list/1,可以按照 ...
- 在django中解决跨域AJAX
由于浏览器存在同源策略机制,同源策略阻止从一个源加载的文档或脚本获取另一个源加载的文档的属性. 特别的:由于同源策略是浏览器的限制,所以请求的发送和响应是可以进行,只不过浏览器不接收罢了. 浏览器同源 ...
- 搞懂：前端跨域问题JS解决跨域问题VUE代理解决跨域问题原理
什么是跨域 跨域:一个域下的文档或脚本试图去请求另一个域下的资源 广义的跨域包含一下内容: 1.资源跳转(链接跳转,重定向跳转,表单提交) 2.资源请求(内部的引用,脚本script,图片img,fr ...
- 前端通过Nginx反向代理解决跨域问题
在前面写的一篇文章SpringMVC 跨域,我们探讨了什么是跨域问题以及SpringMVC怎么解决跨域问题,解决方式主要有如下三种方式: JSONP CORS WebSocket 可是这几种方式都是基 ...
随机推荐
- FPGA实战操作(2) -- PCIe总线（例程设计分析）
1.框架总览 平台:vivado 2016.4 FPGA:A7 在实际应用中,我们几乎不可能自己去编写接口协议,所以在IP核的例程上进行修改来适用于项目是个不错的选择. 通过vivado 中有关PCI ...
- regsvr32 错误解决方案
regsvr32对dll进行注册时报错,0x80070005表示权限不够,虽然是以管理员身份登录,但是仍然需要如下操作: 在运行命令提示符的时候,请右击 命令提示符 选 以管理身份运行.
- 转：Zepto的使用以及注意事项
为什么选择Zepto.js的原因: zepto.js的语法借鉴并且兼容jQuery,会使用jquery就会使用Zepto.js.Zepto.js是移动端的js库.Zepto.js相当于PC端的jQue ...
- docker上传私有仓库报错
docker 1.17 版本搭建私有仓库,上传镜像报错:server gave HTTP response to HTTPS client” 系统环境:centos7docker版本:1.17(注意版 ...
- 【Linux】【二】linux 压缩文件（txt）、查看压缩文件内容、解压缩文件、
通过Xshell 压缩文件.解压缩文件 gzip tools.txt 压缩[tools.txt]文件 zcat tools.txt.gz 查看压缩文件[tools.txt.gz]内容 gunzip ...
- 已经配置好了的 jmeter + ant 框架
已经配置好了的 jmeter + ant 框架 ,需要自取,避免查找安装攻略时耗费时间 使用前需配置环境变量,阅读文件内安装文档!!! 链接:https://pan.baidu.com/s/1eRz9 ...
- HDWIKI6.0后台任意文件删除/下载
- mysql——创建表、修改表、删除表（概念详细讲解）
一.创建一个数据表 create table 表名 ( 列名1 数据类型1 [完整性约束条件], 列名2 数据类型2 [完整性约束条件], 列名3 数据类型3 [完整性约束条件], 列名4 数据类型4 ...
- SolidWorks学习笔记4特征
绘制斜的拉伸效果 一般拉伸方向垂直于草图基准面, 可以实现绘制一条线,作为其拉伸方向 效果如下 简单孔 在菜单中选择“插入”--“特征”---“简单直孔” 选择一个平面放置 设置好孔的直径和深度后,确 ...
- 【有奖征集】报表模板库邀您提反馈，轻松赢取P30！
>>立即参赛 赛事初衷 大数据时代,数据的价值愈发彰显,什么样的报表才能真正帮助业务决策?这几乎是所有信息化建设的企业和个人都在思考的问题. 作为报表领域标杆企业,葡萄城于2017年推出了 ...