问题背景
前端由vue实现,运行在http://localhost:8080/上,后端由springboot实现,运行在http://localhost:8081/上,程序通过在springboot的filter中添加响应头Access-Control-Allow-Origin
以解决跨域问题
程序运行,通过点击vue页面的相应按钮进行访问
存在问题
当添加Access-Control-Allow-Origin
为*
时可以解决跨域问题,但是当Access-Control-Allow-Origin
的值为http://localhost:8080/
时无法解决跨域问题
关键逻辑节选
vue:
<template>
<div>
<h1>查询数据库</h1>
<button @click="action('http://localhost:8081/data?id=1')">点击查询id为1的数据(结果控制台输出)</button>
<hr>
</div>
</template>
<script>
import axios from 'axios'
export default {
name: 'inquire',
methods:{
action(url){
console.log(url)
//注意代理服务的使用方式
axios.get(url).then(
response => {
console.log("Succeed:" , response.data)
},
err => {
console.log("Err:" , err)
},
)
},
}
}
</script>
springboot
filter
package SpringBoot.filter;
import SpringBoot.logger.MyLogger;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.ComponentScan;
import org.springframework.core.annotation.Order;
import javax.servlet.*;
import javax.servlet.annotation.WebFilter;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
@WebFilter(filterName = "MyFilter", urlPatterns = { "/*" })
public class MyFilter implements Filter {
@Override
public void init(FilterConfig filterConfig) throws ServletException {
MyLogger.myLoggerDebug("Filter start...");
}
@Override
public void doFilter(ServletRequest servletRequest,
ServletResponse servletResponse,
FilterChain filterChain) throws IOException, ServletException {
HttpServletResponse hsrp = (HttpServletResponse) servletResponse;
hsrp.setHeader("Access-Control-Allow-Origin", "http://localhost:8080/");
filterChain.doFilter(servletRequest, servletResponse);
}
@Override
public void destroy() {
MyLogger.myLoggerDebug("Filter end...");
}
}
controller
package SpringBoot.controller;
import SpringBoot.bean.User;
import SpringBoot.filter.MyFilter;
import SpringBoot.logger.MyLogger;
import SpringBoot.service.MyService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.servlet.ModelAndView;
import org.springframework.web.servlet.resource.HttpResource;
import javax.servlet.FilterChain;
import javax.servlet.ServletException;
import javax.servlet.ServletRequest;
import javax.servlet.ServletResponse;
import javax.servlet.http.Cookie;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpServletResponseWrapper;
import java.io.IOException;
import java.net.*;
@RestController
public class MyController {
@Autowired
MyService myService;
@RequestMapping("/data")
public User selectUser(@RequestParam("id") int id, HttpServletResponse hsrp )
throws InterruptedException, URISyntaxException {
Cookie cookie = new Cookie("userName","测试参数");
hsrp.addCookie(cookie);
}
return myService.selectUser(id);
}
}
运行截图
后端数据库接口
前端界面(运行前)
前端界面(运行后)
前端运行后的报错信息
为便于排查错误,完整程序已传至云盘,可按需下载&查看:链接: https://caiyun.139.com/m/i?0d... 提取码:GO1S
补充:当响应头Access-Control-Allow-Origin
设置成*
时可以解决跨域问题
后端:
前端(运行后):
Access-Control-Allow-Origin
的值应该为http://localhost:8080
,不含最后那个斜杠/
。再如:
参见
https://developer.mozilla.org...