直接访问如下:
this.$axios.get("http://localhost:8089/yc/demo")
.then(res=>{
    console.log(res)
})
.catch(err=>{
    console.log(err)
})

当运行程序后,控制台报错如下:
...XMLHttpRequest cannot load http://xxx.xxx No 'Access-Control-Allow-Origin'...
跨域访问错误:可以看到浏览器拦截了请求,因为跨域了,下面解决跨域问题。

前端的修改:

Step1:配置BaseUrl
在main.js中,配置下访问的Url前缀:

import Vue from 'vue'
import App from './App'
import Axios from 'axios'

Vue.prototype.$axios = Axios
Axios.defaults.baseURL = '/api'
Axios.defaults.headers.post['Content-Type'] = 'application/json';

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  components: { App },
  template: '<App/>'
})
关键代码是:Axios.defaults.baseURL = '/api',这样每次发送请求都会带一个/api的前缀。

Step2:配置代理
修改config文件夹下的index.js文件,在proxyTable中加上如下代码:
'/api':{
    target: "http://localhost:8089/yc",
    changeOrigin:true,
    pathRewrite:{
        '^/api':''
    }
}

Step3:修改请求Url
修改刚刚的axios请求,把url修改如下:
this.$axios.get("/demo")
.then(res=>{
    console.log(res)
})
.catch(err=>{
    console.log(err)
})

Step4:重启服务
重启服务后,此时已经能够访问了

原理:因为我们给url加上了前缀/api,我们访问/demo就当于访问了:localhost:8080/api/demo(其中localhost:8080是默认的IP和端口)。在index.js中的proxyTable中拦截了/api,并把/api及其前面的所有替换成了target中的内容,因此实际访问Url是http://localhost:8089/yc/demo。

后端的修改:

import javax.servlet.*;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

public class CorsFilter implements Filter {
    @Override
    public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException {
        HttpServletResponse response = (HttpServletResponse) res;
        HttpServletRequest request = (HttpServletRequest) req;

// 不使用*,自动适配跨域域名,避免携带Cookie时失效
        String origin = request.getHeader("Origin");
        if(StringUtils.isNotBlank(origin)) {
            response.setHeader("Access-Control-Allow-Origin", origin);
        }

// 自适应所有自定义头
        String headers = request.getHeader("Access-Control-Request-Headers");
        if(StringUtils.isNotBlank(headers)) {
            response.setHeader("Access-Control-Allow-Headers", headers);
            response.setHeader("Access-Control-Expose-Headers", headers);
        }

// 允许跨域的请求方法类型
        response.setHeader("Access-Control-Allow-Methods", "*");
        // 预检命令(OPTIONS)缓存时间,单位:秒
        response.setHeader("Access-Control-Max-Age", "3600");
        // 明确许可客户端发送Cookie,不允许删除字段即可
        response.setHeader("Access-Control-Allow-Credentials", "true");
        
        chain.doFilter(request, response);
    }

@Override
    public void init(FilterConfig filterConfig) {

}

@Override
    public void destroy() {
    }

/*
    注册过滤器:
    @Bean
    public FilterRegistrationBean registerFilter() {
        FilterRegistrationBean<CorsFilter> bean = new FilterRegistrationBean<>();
        bean.addUrlPatterns("/*");
        bean.setFilter(new CorsFilter());
        // 过滤顺序,从小到大依次过滤
        bean.setOrder(Ordered.HIGHEST_PRECEDENCE);

return bean;
    }
     */
}

Axiso解决跨域访问(...XMLHttpRequest cannot load http://xxx.xxx No 'Access-Control-Allow-Origin'...)的更多相关文章

  1. Axiso解决跨域访问

    问题: 在项目中需要需要讲本地项目去请求一个URL接口获取数据 例如: 本地请求地址:http://127.0.0.1:19323/site/info.json 请求Url地址:http://www. ...

  2. springboot 前后端分离开发解决跨域访问

    最近新学习了Java EE开发框架springboot,我在使用springboot前后台分离开发的过程中遇到了跨域求问题.在网上寻找答案的过程中发现网上的解决方案大多比较零散,我在这里整理一个解决方 ...

  3. 用jQuery与JSONP轻松解决跨域访问的问题【转】

    原文地址:http://www.jb51.net/article/46463.htm 好在,有jquery帮忙,跨域问题似乎没那么难缠了.这次也借此机会对跨域问题来给刨根问底,结合实际的开发项目,查阅 ...

  4. 用jQuery与JSONP轻松解决跨域访问的问题

    浏览器端的真正跨域访问,推荐的是目前jQuery $.ajax()支持get方式的跨域,这其实是采用jsonp的方式来完成的. var qsData = {'searchWord':$("# ...

  5. C# 和Jsonp的一个小demo 用jQuery与JSONP轻松解决跨域访问的问题

    客服端:      在A项目下面 建立一个 JsonpClient.aspx页面,代码如下: <%@ Page Language="C#" AutoEventWireup=& ...

  6. spring boot 解决跨域访问

    package com.newings.disaster.shelters.configuration; import org.springframework.context.annotation.B ...

  7. CORS解决跨域访问问题

    简言之,CORS就是为了让AJAX可以实现可控的跨域访问而生的. Tomcat下的配置   下载cors-filter-1.7.jar,java-property-utils-1.9.jar  [下载 ...

  8. .Net Core 处理跨域问题Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource

    网页请求报错: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Or ...

  9. angularjs flask跨域问题 XMLHttpRequest cannot load. No 'Access-Control-Allow-Origin'

    场景,我要来我的server(A)上用api来访问另一个server(B)的问题,如果直接在A上调用B的api,那么就会出现XMLHttpRequest cannot load. No 'Access ...

随机推荐

  1. CCF关于NOIP复赛网络申诉问题的公告

    CCF NOI竞赛委员会将NOIP复赛网络申诉的有关情况公告如下.凡属于以下情况的申诉,均不予受理 1.非公示期限内提出的申诉,不予受理: 2.与个人名次.他人成绩和他人名次有关的申诉,不予受理: 3 ...

  2. xss之cookie窃取

    一.窃取cookie有什么用? cookie相当于一个身份证 有了管理员的cookie我们不需要帐号密码就可以登陆 二.反射型xss有存贮型xss什么区别? 反射 xss  和服务器没有交互 只能用一 ...

  3. [Linux]Redhat7配置CentOS7 YUM源

    一.简介 安装Redhat7并配置了网卡之后,虽然可以直接ping www.baidu.com,但是执行yum install的命令时提示如下信息: [root@ansible ~]# yum ins ...

  4. 1. Django概述

    1.1 设计模型 Django,但它附带了一个你可以用python代码描述数据库布局的对象关系映射器. 数据模型语法提供了许多丰富的方法来展现你的模型——到目前为止,它解决了多年来数据库模式问题. 简 ...

  5. Python IDE:pycharm

    ------------------------------------------------------安装pycharm------------------------------------- ...

  6. WebView性能、体验分析与优化

    育新 徐宏 嘉洁 ·2017-06-09 20:03 在App开发中,内嵌WebView始终占有着一席之地.它能以较低的成本实现Android.iOS和Web的复用,也可以冠冕堂皇的突破苹果对热更新的 ...

  7. 多线程callable使用方法

    Runnable是执行工作的独立任务,但是它不返回任何值.在JavaSE5中引入的Callable是一种具有类型参数的泛型,它的类型参数表的是从方法call()中返回的值,并且必须使用Executor ...

  8. solr增加中文分析器

    我的solr版本是5.3.0 1将jar包ik-analyzer-solr5-5.x.jar放入sor的web-inf的lib里面 2 在web-inf下面新建classes目录,再新增三个配置文件: ...

  9. 学习笔记TF046:TensoFlow开发环境,Mac、Ubuntu/Linux、Windows,CPU版本、GPU版本

    下载TensorFlow https://github.com/tensorflow/tensorflow/tree/v1.1.0 .Tags选择版本,下载解压. pip安装.pip,Python包管 ...

  10. fixed 相对于父容器定位

    当一个元素设置为 fixed 或 absolute,不设置 top, left 则会在原位置,而脱离文档流,别的元素可以存在于它之后. 而当使用 fixed 后还想相对于父容器进行定位,或者说在当前位 ...