解决vue跨域问题
环境搭建1.服务端服务端端口8081,服务端有资源"http://localhost:8081/hello"@WebServlet("/hello")public class HelloServlet extends HttpServlet {@Overrideprotected void doGet(HttpServletRequest request, H...
·
环境搭建
1.服务端
服务端端口8081,服务端有资源"http://localhost:8081/hello"
@WebServlet("/hello")
public class HelloServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doPost(request, response);
}
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
System.out.println("- - - - 8081 /hello - - - -");
response.getWriter().write("success");
}
}
2.客户端
客户端端口8080,地址“http://localhost:8080”
App.vue
<template>
<div>
<h4>This is 8080</h4>
<button @click="test">Click Me</button>
</div>
</template>
<script>
import $ from 'jquery'
export default{
methods:{
test(){
$.ajax({
url:'http://localhost:8081/hello',
type:'POST',
success:function (res) {
alert(res);
},
error:function () {
alert("发生错误");
}
});
}
}
}
</script>
<style>
</style>
3.运行
发送请求,ajax跨域请求失败
一、修改后端
服务端设置响应头response.setHeader("Access-Control-Allow-Origin", "*");
*代表可访问的地址,可以设置指定域名
@WebServlet("/hello")
public class HelloServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doPost(request, response);
}
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.setHeader("Access-Control-Allow-Origin", "*");
System.out.println("- - - - 8081 /hello - - - -");
response.getWriter().write("success");
}
}
结果:
二、修改前端
使用proxyTable设置接口代理(项目使用vue-cli脚手架搭建)
在config/index.js下设置
proxyTable: {
'/api':{ //匹配所有以'api'开头的请求路径
target:'http://localhost:8081', //代理目标的基础路径
changeOrigin:true, //是否支持跨域
pathRewrite:{ //重写路径:去掉路径中开头的'/api'
'^/api':''
}
}
}
App.vue
<template>
<div>
<h4>This is 8080</h4>
<button @click="test">Click Me</button>
</div>
</template>
<script>
import $ from 'jquery'
export default{
methods:{
test(){
$.ajax({
url:'/api/hello',
type:'POST',
success:function (res) {
alert(res);
},
error:function () {
alert("发生错误");
}
});
}
}
}
</script>
<style>
</style>
结果:
更多推荐
已为社区贡献1条内容
所有评论(0)