Vue.js如何实现跨域请求?

最近两天听朋友说Vue调后台接口有跨域问题,没搞过Vue开发 研究了一晚上,终于可以成功调用。其实和Vue没有任何关系,只需要在后台设置一下就好。我用的是ssm框架,服务是Tomcat。具体操作如下:

1.重新 HandlerInterceptor 的方法设置header

package cn.mesie.utils;

import org.springframework.web.servlet.HandlerInterceptor;
import org.springframework.web.servlet.ModelAndView;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
 * Created by 03/04/2018 10:00 PM
 * 解决跨域问题
 * @author: mesie
 */
public class CORSInterceptor implements HandlerInterceptor{
    @Override
    public boolean preHandle(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse, Object o) throws Exception {
        httpServletResponse.addHeader("Access-Control-Allow-Origin", "http://localhost:8081");
        httpServletResponse.addHeader("Access-Control-Allow-Credentials", "true");
        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 {

    }
}

2 在springMVC的配置位置设置 CORSInterceptor

<mvc:interceptors>
    <mvc:interceptor>
        <mvc:mapping path="/**"/>
        <bean class="cn.mesie.utils.CORSInterceptor"></bean>
    </mvc:interceptor>
</mvc:interceptors>

3 在web.xml文件中配置好CORSFilter

<filter>
  <filter-name>CorsFilter</filter-name>
  <filter-class>com.thetransactioncompany.cors.CORSFilter</filter-class>
</filter>

<filter-mapping>
  <filter-name>CorsFilter</filter-name>
  <url-pattern>/*</url-pattern>
</filter-mapping>

猜你喜欢

转载自blog.csdn.net/baidu_28610773/article/details/79816034