使用axios发送请求
- 安装axios
npm install axios
发送请求,报了如下错误
跨域:
A域名 请求B域名:
http://localhost 发送ajax请求,请求http://localhost:8080
形成跨域:
- 协议是否一样
- 服务器的ip是否一样
- 端口是否一样
上面三个只要有一个不一样, 形成跨域
浏览器默认禁止跨域请求
解决跨域:
- 前端解决: 配置代理服务器
在vue.config.js文件中:
//代理服务器解决跨域问题
devServer: {
//写的是后台服务器的协议+ip+端口
proxy: {
'/api': {
target: 'http://localhost:8080', //url的重写: /api 替换为http://localhost:8080
ws: false,
changeOrigin: true, //支持跨域请求
}
}
}
发送的请求加 /api前缀
this.$axios.get('/api/login2?user=zhangsan&password=123')
.then(function (response) {
// 处理成功情况
console.log(response);
})
.catch(function (error) {
// 处理错误情况
console.log(error);
})
}
后台服务器:所有的请求加 /api前缀
-
后台解决跨域
在项目中配置一个处理跨域的过滤器
package com.fs.user.filter; import javax.servlet.*; import javax.servlet.annotation.WebFilter; import javax.servlet.http.HttpServletResponse; import java.io.IOException; @WebFilter(filterName="contextfilter",urlPatterns="/*") public class CrossFilter implements Filter { public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException { HttpServletResponse response = (HttpServletResponse) res; response.setHeader("Access-Control-Allow-Origin", "*"); //允许所有的域名访问 response.setHeader("Access-Control-Allow-Methods", "POST, GET, PUT, PATCH, DELETE"); //允许的提交方式 response.setHeader("Access-Control-Max-Age", "3600"); //最大有效时间 response.setHeader("Access-Control-Allow-Headers", "x-requested-with, Content-Type, Accept, Origin"); //允许那些请求头 response.setHeader("Access-Control-Allow-Credentials", "true"); //是否支持ajax提交cookie chain.doFilter(req, res); } public void init(FilterConfig filterConfig) {} public void destroy() {} }
-
使用nginx,其他的服务器处理跨域