axios怎么配置跨域请求

Question

现在封装的http如下（借鉴网友）：

import axios from 'axios'
import store from '@/store/'
import router from '@/router/'

// axios 配置
axios.defaults.timeout = 5000
// axios.defaults.baseURL = ''

// 请求拦截器
axios.interceptors.request.use(
    config => {
        if (store.state.token) {
            config.headers.Authorization = `token ${store.state.token}`
        }
        // config.headers.token = localStorage.getItem('token')  // 将接口返回的token信息配置到接口请求中
        return config
    },
    err => {
        return Promise.reject(err)
    }
)

// 返回拦截器
axios.interceptors.response.use(
    response => {
        return response
    },
    error => {
        if (error.response) {
            store.dispatch('logout')
            router.replace({
                path: '/login',
                query: {redirect: router.currentRoute.fullPath}
            })
        }
        return Promise.reject(error.response.data)
    }
)

export default axios

有个问题是发起post请求会出现option拦截，降低chrome安全等级后可以调通，问：怎么配置axios跨域？
我搜了下有说qs转的，但是要求传参是json，这个行不通

Answer 1

开发的时候，可以通过proxyTable配置，通过node代理为前端同域。
测试或开发时，可以使用nginx/apache等代理为同域。
当然也可以配置服务器端支持cors

Answer 2

然后台配合你配置一下 Access-Control-Allow-Headers 参数

Answer 3

如果你后台使用的是Java开发的，那么可以创建一个拦截器。通过拦截器设置response的Header

@Configuration
public class AccessInterceptor implements HandlerInterceptor {
    /**
     * 访问控制器前
     * @param request
     * @param response
     * @param o
     * @return
     * @throws Exception
     */
    @Override
    public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object o) throws Exception {
        response.setHeader("Access-Control-Allow-Origin", request.getHeader("Origin"));
        response.setHeader("Access-Control-Allow-Credentials", "true");
        response.setHeader("P3P", "CP=CAO PSA OUR");
        if (request.getHeader("Access-Control-Request-Method") != null && "OPTIONS".equals(request.getMethod())) {
            response.addHeader("Access-Control-Allow-Methods", "POST,GET,TRACE,OPTIONS");
            response.addHeader("Access-Control-Allow-Headers", "Content-Type,Origin,Accept");
            response.addHeader("Access-Control-Max-Age", "120");
        }
        //为true的时候放行
        return true;
    }

    /**
     * 访问控制器后,渲染页面前
     *
     * @param request
     * @param response
     * @param o
     * @param modelAndView
     * @throws Exception
     */
    @Override
    public void postHandle(HttpServletRequest request, HttpServletResponse response, Object o, ModelAndView modelAndView)
            throws Exception {

    }

    /**
     * 渲染页面后
     *
     * @param request
     * @param response
     * @param o
     * @param e
     * @throws Exception
     */
    @Override
    public void afterCompletion(HttpServletRequest request, HttpServletResponse response, Object o, Exception e)
            throws Exception {

    }
}

第二种方式就是使用nginx做代理，把所有请求都交由nginx进行转发，通过在nginx.conf配置文件中进行配置。比如请求的url为localhost:8080/user/，就在nginx.conf中配置user/绑定其他你需要请求的url路径。比如配置为:

location ~ \/user$ {
    proxy_pass http://location:9090;
}

这样就可以将user后缀的请求匹配到http://location:9090，这样也可以解决跨域问题，我使用的方式是通过nginx来做。