Axiso解决跨域访问(...XMLHttpRequest cannot load http://xxx.xxx No 'Access-Control-Allow-Origin'...)
直接访问如下:
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'...)的更多相关文章
- Axiso解决跨域访问
问题: 在项目中需要需要讲本地项目去请求一个URL接口获取数据 例如: 本地请求地址:http://127.0.0.1:19323/site/info.json 请求Url地址:http://www. ...
- springboot 前后端分离开发解决跨域访问
最近新学习了Java EE开发框架springboot,我在使用springboot前后台分离开发的过程中遇到了跨域求问题.在网上寻找答案的过程中发现网上的解决方案大多比较零散,我在这里整理一个解决方 ...
- 用jQuery与JSONP轻松解决跨域访问的问题【转】
原文地址:http://www.jb51.net/article/46463.htm 好在,有jquery帮忙,跨域问题似乎没那么难缠了.这次也借此机会对跨域问题来给刨根问底,结合实际的开发项目,查阅 ...
- 用jQuery与JSONP轻松解决跨域访问的问题
浏览器端的真正跨域访问,推荐的是目前jQuery $.ajax()支持get方式的跨域,这其实是采用jsonp的方式来完成的. var qsData = {'searchWord':$("# ...
- C# 和Jsonp的一个小demo 用jQuery与JSONP轻松解决跨域访问的问题
客服端: 在A项目下面 建立一个 JsonpClient.aspx页面,代码如下: <%@ Page Language="C#" AutoEventWireup=& ...
- spring boot 解决跨域访问
package com.newings.disaster.shelters.configuration; import org.springframework.context.annotation.B ...
- CORS解决跨域访问问题
简言之,CORS就是为了让AJAX可以实现可控的跨域访问而生的. Tomcat下的配置 下载cors-filter-1.7.jar,java-property-utils-1.9.jar [下载 ...
- .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 ...
- angularjs flask跨域问题 XMLHttpRequest cannot load. No 'Access-Control-Allow-Origin'
场景,我要来我的server(A)上用api来访问另一个server(B)的问题,如果直接在A上调用B的api,那么就会出现XMLHttpRequest cannot load. No 'Access ...
随机推荐
- CCF关于NOIP复赛网络申诉问题的公告
CCF NOI竞赛委员会将NOIP复赛网络申诉的有关情况公告如下.凡属于以下情况的申诉,均不予受理 1.非公示期限内提出的申诉,不予受理: 2.与个人名次.他人成绩和他人名次有关的申诉,不予受理: 3 ...
- xss之cookie窃取
一.窃取cookie有什么用? cookie相当于一个身份证 有了管理员的cookie我们不需要帐号密码就可以登陆 二.反射型xss有存贮型xss什么区别? 反射 xss 和服务器没有交互 只能用一 ...
- [Linux]Redhat7配置CentOS7 YUM源
一.简介 安装Redhat7并配置了网卡之后,虽然可以直接ping www.baidu.com,但是执行yum install的命令时提示如下信息: [root@ansible ~]# yum ins ...
- 1. Django概述
1.1 设计模型 Django,但它附带了一个你可以用python代码描述数据库布局的对象关系映射器. 数据模型语法提供了许多丰富的方法来展现你的模型——到目前为止,它解决了多年来数据库模式问题. 简 ...
- Python IDE:pycharm
------------------------------------------------------安装pycharm------------------------------------- ...
- WebView性能、体验分析与优化
育新 徐宏 嘉洁 ·2017-06-09 20:03 在App开发中,内嵌WebView始终占有着一席之地.它能以较低的成本实现Android.iOS和Web的复用,也可以冠冕堂皇的突破苹果对热更新的 ...
- 多线程callable使用方法
Runnable是执行工作的独立任务,但是它不返回任何值.在JavaSE5中引入的Callable是一种具有类型参数的泛型,它的类型参数表的是从方法call()中返回的值,并且必须使用Executor ...
- solr增加中文分析器
我的solr版本是5.3.0 1将jar包ik-analyzer-solr5-5.x.jar放入sor的web-inf的lib里面 2 在web-inf下面新建classes目录,再新增三个配置文件: ...
- 学习笔记TF046:TensoFlow开发环境,Mac、Ubuntu/Linux、Windows,CPU版本、GPU版本
下载TensorFlow https://github.com/tensorflow/tensorflow/tree/v1.1.0 .Tags选择版本,下载解压. pip安装.pip,Python包管 ...
- fixed 相对于父容器定位
当一个元素设置为 fixed 或 absolute,不设置 top, left 则会在原位置,而脱离文档流,别的元素可以存在于它之后. 而当使用 fixed 后还想相对于父容器进行定位,或者说在当前位 ...