https://easy-mock.com/
跨域是浏览器为了安全而做出的限制策略浏览器请求必须遵循同源策略︰同域名、同端口、同协议
λ vue --version
@vue/cli 4.4.6
"dependencies": {
"axios": "^0.20.0",
"core-js": "^3.6.5",
"jsonp": "^0.2.1",
"vue": "^2.6.11"
}
1 CORS跨域
服务端设置，前端直接调用说明︰后台允许前端某个站点进行访问
<dependencyManagement>
<dependencies>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-dependencies</artifactId>
<version>${spring-boot.version}</version>
<type>pom</type>
<scope>import</scope>
</dependency>
</dependencies>
</dependencyManagement>
<properties>
<java.version>1.8</java.version>
<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
<project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
<!-- boot -->
<spring-boot.version>2.0.0.RELEASE</spring-boot.version>
</properties>
@Configuration
public class CorsConfig {
private CorsConfiguration buildConfig() {
CorsConfiguration corsConfiguration = new CorsConfiguration();
corsConfiguration.addAllowedOrigin("*"); // 1、允许任何域名使用
corsConfiguration.addAllowedHeader("*"); // 2、允许任何头
corsConfiguration.addAllowedMethod("*"); // 3、允许任何方法（post、get等）
corsConfiguration.setAllowCredentials(true); // 4、支持安全证书，跨域携带cookie需要配置这个
corsConfiguration.setMaxAge(3600L); // 5、预检请求的有效期，单位为秒。设置maxage，可以避免每次都发出预检请求
return corsConfiguration;
}
// org.springframework.web.cors.CorsConfiguration
// org.springframework.web.cors.UrlBasedCorsConfigurationSource
// org.springframework.web.filter.CorsFilter
@Bean
public CorsFilter corsFilter() {
UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
source.registerCorsConfiguration("/**", buildConfig());
return new CorsFilter(source);
}
}
@RestController
public class CrossController {
// http://localhost:5000/cross
@GetMapping("/cross")
public Map<String, Object> cross() {
HashMap<String, Object> res = new HashMap<>();
res.put("code", "2000");
res.put("msg", "success");
return res;
}
}
<!--
App.vue
-->
<template>
<div id="app">
<button @click="byAxios">byAxios</button>
</div>
</template>
<script>
// cnpm i axios --save
import axios from 'axios'
export default {
methods: {
byAxios: function () {
const url = 'http://localhost:5000/cross';
axios.get(url).then(({data}) => {
console.log(data)
})
}
}
}
</script>
<style>
</style>
2 JSONP跨域
前端适配，后台配合说明：前后台同时改造
jsonp：https://yuanyu.blog.csdn.net/article/details/103273989
@RestController
public class JsonpController {
// http://localhost:5000/jsonp
@ResponseBody
@GetMapping("/jsonp")
public String getAUth(@RequestParam String callback) throws JsonProcessingException {
HashMap<String, String> auth = new HashMap<>();
auth.put("1", "添加用户");
auth.put("2", "添加部门");
// 服务端需要特殊处理
return callback + "(" + new ObjectMapper().writeValueAsString(auth) + ")";
}
}
<!--
App.vue
-->
<template>
<div id="app">
<button @click="byJsonp">byJsonp</button>
</div>
</template>
<script>
// cnpm i jsonp --save
import jsonp from 'jsonp'
export default {
methods: {
byJsonp: function () {
const url = 'http://localhost:5000/jsonp';
jsonp(url,(err, data)=>{
console.log(data)
})
}
}
}
</script>
<style>
</style>
3 代理跨域
通过修改nginx服务器配置来实现说明：前端修改，后台不动
@RestController
@RequestMapping("/api")
public class AuthController {
// http://127.0.0.1:5000/api/auth
@ResponseBody
@GetMapping("/auth")
public HashMap<String, String> getAuth() {
HashMap<String, String> auth = new HashMap<>();
auth.put("1", "添加用户");
auth.put("2", "添加部门");
return auth;
}
}
在vue项目中添加 vue.config.js 文件
// vue.config.js
// vue给我们提供了，使用node.js服务器代理
// vue.config.js就是webpack配置表，最终webpack传送给node.js服务器
module.exports = {
devServer: {
host: 'localhost',
port: 8080,
proxy: {
'/api': {
target: 'http://127.0.0.1:5000',
changeOrigin: true,
pathRewrite: {
'/api': '/api'
}
}
}
}
}
<!--
App.vue
-->
<template>
<div id="app">
<button @click="getAuth">getAuth</button>
</div>
</template>
<script>
import axios from 'axios'
export default {
methods: {
getAuth: function () {
const url = '/api/auth';
axios.get(url).then(({data}) => {
console.log(data)
})
}
}
}
</script>
<style>
</style>
https://blog.csdn.net/xuanhaiyang2008/article/details/101541830
