报错信息
Access to XMLHttpRequest at 'http://localhost:8080/VXApplets/UserInfoService/login' from origin 'http://localhost:8082' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
报错原因
在使用vue-axios进行跨域访问时,访问的相应结果被浏览器拦截,认为这是一个不安全的访问
解决方法
可以从两方面来解决这个问题
-
前端使用代理进行处理
-
在vue.config.js中加入如下内容
module.exports = { outputDir: 'dist', //build输出目录 assetsDir: 'assets', //静态资源目录(js, css, img) lintOnSave: false, //是否开启eslint devServer: { open: false, //是否自动弹出浏览器页面 host: "localhost", port: '8082', // https: false, //是否使用https协议 // hotOnly: true, //是否开启热更新 proxy: { '/api': { target: 'http://localhost:8080/VXApplets/', //API服务器的地址 // target: 'https://www.12345678910.ltd/VXApplets-1.0-SNAPSHOT/', //API服务器的地址 changeOrigin: true, pathRewrite: { '^/api': '' } } } } }
-
在main.js中修改代码
import Vue from 'vue' import App from './App.vue' import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; import router from './router' import store from './store' import axios from 'axios' Vue.config.productionTip = false Vue.use(ElementUI); Vue.prototype.$axios = axios; // axios.defaults.baseURL = 'http://localhost:8080/VXApplets/' // axios.defaults.baseURL = 'https://www.12345678910.ltd/VXApplets-1.0-SNAPSHOT/' axios.defaults.baseURL = '/api' axios.defaults.headers.post['Content-Type'] = 'application/json'; new Vue({ router, store, render: h => h(App) }).$mount('#app')
-
-
后端添加响应头进行处理(有两种方案供选择)
-
添加@CrossOrigin注解在类名或方法名上
-
使用拦截器添加响应头
package com.neu.interceptor; import org.springframework.web.servlet.HandlerInterceptor; import org.springframework.web.servlet.ModelAndView; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; public class ProcessInterceptor implements HandlerInterceptor { @Override public boolean preHandle(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse, Object o) throws Exception { httpServletResponse.setHeader("Access-Control-Allow-Origin", "*"); httpServletResponse.setHeader("Access-Control-Allow-Headers", "Content-Type,Content-Length, Authorization, Accept,X-Requested-With"); httpServletResponse.setHeader("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS"); httpServletResponse.setHeader("X-Powered-By","Jetty"); String method= httpServletRequest.getMethod(); if (method.equals("OPTIONS")){ httpServletResponse.setStatus(200); return false; } System.out.println(method); return true; } @Override public void postHandle(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse, Object o, ModelAndView modelAndView) throws Exception { } @Override public void afterCompletion(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse, Object o, Exception e) throws Exception { } }
并在mvc-xml中配置拦截器
<mvc:interceptors> <bean class="com.neu.interceptor.ProcessInterceptor"></bean> </mvc:interceptors>
-