精华内容
下载资源
问答
  • Vue axios跨域配置proxyTable404错误

    千次阅读 2019-10-08 23:57:24
    配置的config/index.js proxyTable: { '/apia':{ target:'https://api.caiyunapp.com',//目标接口域名 changeOrigin: true,//是否跨域 pathRewrite:{ '^/apia': ''//重写接口,后面可以使重写的新路径,一...

    配置的config/index.js

     proxyTable: {
          '/apia':{
            target:'https://api.caiyunapp.com',//目标接口域名
            changeOrigin: true,//是否跨域
            pathRewrite:{
              '^/apia': ''//重写接口,后面可以使重写的新路径,一般不做更改
            }
          },
          '/api': {
              target: 'http://127.0.0.1:8081',
              changeOrigin: true,
              pathRewrite: {
                '^/api': '/'
              }
          }
        },
    

    第一个是第三方接口,能够正常访问,第二个是我的后端程序,访问时报404错误
    在这里插入图片描述
    然后我尝试了从后端解决
    在springboot的controller前面加了

    @CrossOrigin(origins= {"http://127.0.0.1:8080"},maxAge=3600)
    

    然而,仍然报错,
    采用了filter解决

    package per.czt.onlineshop.filter;
    
    import java.io.File;
    import java.io.FileFilter;
    import java.io.IOException;
    
    import javax.servlet.Filter;
    import javax.servlet.FilterChain;
    import javax.servlet.FilterConfig;
    import javax.servlet.ServletException;
    import javax.servlet.ServletRequest;
    import javax.servlet.ServletResponse;
    import javax.servlet.http.HttpServletResponse;
    
    import org.springframework.stereotype.Component;
    //@Component
    public class CrosFilter implements Filter {
    
    	@Override
    	public void init(FilterConfig filterConfig) throws ServletException {
    		// TODO Auto-generated method stub
    		System.out.println("CrosFilter");
    
    	}
    
    	@Override
    	public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain)
    			throws IOException, ServletException {
    		HttpServletResponse res = (HttpServletResponse) response;
    		res.setHeader("Access-Control-Allow-Origin", "*");
    		res.setHeader("Access-Control-Allow-Credentials", "true");
    		res.setHeader("Access-Control-Allow-Methods", "POST, GET, PATCH, DELETE, PUT");
    		res.setHeader("Access-Control-Max-Age", "3600");
    		res.setHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
    		chain.doFilter(request, response);
    		// TODO Auto-generated method stub
    
    	}
    
    	@Override
    	public void destroy() {
    		// TODO Auto-generated method stub
    
    	}
    
    }
    
    

    还是报错,
    最后,从网上查了好的,都没有解决,最后有位朋友的博客中说如果后端错误,proxytable是无效的
    我尝试了一下后端访问,结果
    在这里插入图片描述
    为什么后端访问不到url那?我又查阅了一些资料
    我今天在整合mongodb时候配置了一个@SpringBootApplication(scanBasePackageClasses= {com.mongodb.MongoClient.class})(不加也行的)
    scanBasePackageClasses扫描不到controller包,导致无法访问url,项目却能够启动,然后删除了这个注解,问题解决
    在这里插入图片描述
    错误原因:没有充分了解springboot的注解的原理,以后应该加强框架底层原理的学习

    展开全文
  • vue前端设置跨域时,有时会需要设置两个跨域,因为后台接口是2个不一样的ip或端口 那么此时要注意,这两个跨域名称要设置成不重合的 比如: 请不要设置成这样: 因为后面的名称的起始处包含了前面那个名称,会...

    在vue前端设置跨域时,有时会需要设置两个跨域,因为后台接口是2个不一样的ip或端口
    那么此时要注意,这两个跨域名称要设置成不重合的
    比如:
    在这里插入图片描述
    请不要设置成这样:
    在这里插入图片描述
    因为后面的名称的起始处包含了前面那个名称,会导致先匹配到前面去,整个后面那个设置就乱了,因为这是正则匹配。

    展开全文
  • Vue配置 config.js下添加 module.exports = { devServer: { proxy: { // 跨域配置 '/api': { target: 'http://127.0.0.1:8000', ws: true, changeOrigin: true, ...

    讲真,这玩意可把我整累了。

    Vue端配置
    vue.config.js下添加

    module.exports = {
    	devServer: {
    		proxy: {																						// 跨域配置
    			'/api': {
    				target: 'http://127.0.0.1:8000',
    				ws: true,
    				changeOrigin: true,							
    				pathRewrite: {																	// 路径重写
    					'^/api': '/http://127.0.0.1:8000',
    					'^/app01': '/http://127.0.0.1:8000/app01',
    				}
    			}
    		}
    	}
    }
    

    Django3端配置
    安装django-cors-headers包

    pip install django-cors-headers
    

    settings.py下配置

    INSTALLED_APPS = [
        ......
        'corsheaders',
        ......
    ]
    
    MIDDLEWARE = [
        ......
        'corsheaders.middleware.CorsMiddleware',			# 注意顺序
        'django.middleware.common.CommonMiddleware',		# 要添加的在其上
        ......
    ]
    
    CORS_ORIGIN_ALLOW_ALL = True
    CORS_ALLOW_CREDENTIALS = True
    
    展开全文
  • 解决Vue3.0 跨域问题

    2020-09-29 11:08:58
    //更改axios默认路径,改为 /api 原因是要在vue.config.js里面配置 axios.default.baseURL='/api' 因为Vue3.0没有vue.config.js所以需要手动添加 在这个文件里面写跨域的字段 devServer:{ proxy:{

    解决Vue3.0 跨域问题

    当你的vue3.0和本地api服务器存在跨域可以使用此方法解决

    main.js

    //默认使用axios
    Vue.prototype.$axios = axios
    //更改axios默认路径,改为 /api 原因是要在vue.config.js里面配置
    axios.default.baseURL='/api'
    
    因为Vue3.0没有vue.config.js所以需要手动添加

    需要在views同级

    在这个文件里面写跨域的字段
     devServer:{
            proxy:{
                '/api':{
                    target:"http://localhost:3000/",//API服务器地址(更换为你的路径)
                    ws:true,//代理websocked
                    changeOrigin:true,//虚拟的站点需要更管origin
                    pathRewrite:{
                        '^/api':''//重写路径
                    }
                }
            }
        }
    

    这样就可以在本地访问别的端口号的api接口

    展开全文
  • Vue项目,因为前后端分离,所以在请求后端接口时,时常遇到跨站问题, 1、如果前后端项目部署时候不在同域名下,前端不用配置,后端做好CORS配置即可,后端配置可参考...
  • node+vue 解决跨域问题

    2019-02-27 10:39:08
    这里写自定义目录标题node+vue 解决跨域问题跨域解决跨域 node+vue 解决跨域问题 第一次使用CSDN记录自己在平时项目中踩到的坑,各位大神不喜勿喷!同时也欢迎各位交流学习。 我在写node+express+vue+mysql的项目中...
  • 补充知识:VUE axios请求跨域时没有带上cookie或者每次cookie都改变 这两天用VUE写管理后端时,碰到一个奇葩问题: 我本地使用dev配置开发的时候 请求可以带上cookie信息 打包出来部署在服务器上 请求就没带上...
  • Electron-vue解决跨域

    千次阅读 2020-07-10 11:38:56
    Electron-vue解决跨域 博客说明 文章所涉及的资料来自互联网整理和个人总结,...在.electron-vue下面的dev-runner.js里面的WebpackDevServer添加配置 代码 proxy: { '/api': { // 请求的目标服务器地址 ta
  • vue config.js 配置跨域不生效

    千次阅读 2020-12-02 18:24:54
    vue config.js 配置跨域不生效 首先,我的config.js文件没有问题 module.exports = { devServer: { open: true, host: 'localhost', port: 8080, https: false, hotOnly: false, proxy: { // 配置跨域 '/...
  • vue cli旧版本配置跨域 在config/index.js中配置 proxyTable: { '/api': { target: 'http://localhost:8080', pathRewrite: { '^/api': '/static/mock' } } } vue cli4配置跨域 在package.json同级目录下...
  • 跨域问题后台django部分第一步,安装cors的扩展包第二步,导入应用第三步,插入中间件第四步,允许发送cookie第五步,设置白名单:第六步,设置允许的请求方法第七步,设置允许的其请求头第八步,测试2.CSRF问题和...
  • 如题。。我试过了跨域貌似普通的拦截器方法不行。。...Vue.http.interceptors.push((request, next) => { if (/* if need jsonp */) { request.credentials = true } next() }) 希望能给点帮助
  • #vue前端、java后端、nginx三端配置跨域 1. Vue前端配置跨域 1.在vue.config.js文件(修改之后进行重启才有效)或index.js文件中配置 module.exports = { devServer: { // proxyTable: proxyConfig.proxyList, // ...
  • 1、新建filter类,配置请求头,以及允许访问的WEB服务器的域名/IP 地址和端口号 注意这里不能**不然cookie无效。 httpServletResponse.setHeader(“Access-Control-Allow-Origin”, “**”); package filter; import...
  • vue使用axios进行跨域操作时main.js设置了axios设置axios.defaults.headers.post['Content-Type'] = 'application/json;charset=UTF-8'; 导致出现了跨域错误 cors规定其中Content-Type 只能为以下之一: text/plain...
  • 前言 如题 代码 // 默认请求地址 Axios.defaults.baseURL = baseURL // 超时时间 Axios.defaults.timeout = 5000 // 允许携带cookie请求 Axios.defaults.withCredentials = true ...Axios.defaults.headers.post['...
  • vue cli3跨域配置问题

    2020-05-13 09:39:47
    最近工作不是很忙,来就想自己搞个vue项目练练手,之前工作项目框架都是公司大佬搭建的,这次自己搭建框架遇到了一个跨域的问题,在网上百度了很多教程,讲的都不是很如我意,这里自己写一篇博客记录一下。...
  • 基本跨域问题: 后台改动: 不同框架不同版本多种方式,网上也各种方案,所以这里只说我的,我的项目是SpringBoot2.x+Spring...详见Vue axios异步、跨域请求及proxyTable无效问题详解 进入正题: 问题场景: 通过跨...
  • vue脚手架的跨域配置

    2020-12-01 21:48:55
    module.exports = { devServer: { open: true, proxy: { '/getDiscList': { target: 'http://localhost:8000/tp5/publica/index/Cook/show',// 要跨域的... changeOrigin: true, // 是否开启跨域 pathRewrite: .
  • vue跨域问题

    2021-06-07 19:01:36
    跨域配置如下 'use strict' // Template version: 1.3.1 // see http://vuejs-templates.github.io/webpack for documentation. const path = require('path') module.exports = { dev: { // Paths ...
  • 在config目录下的index.js中增加如下配置, proxyTable: { '/api': { target: 'https://rest2c.markuni.com/', changeOrigin: true, pathRewrite: { '^/api': '' } } }, 将原本的接口域名替换为 api/ 就可以...
  • 下面为需要跨域的 proxy: { '/api': { // 拦截以 /api 开头的接口 target: 'http://localhost:('自己后台端口号')/',//设置你调用的接口域名和端口号 别忘了加http changeOrigin: true, //这里...
  • webpack配置接口地址代理 我们打开下面路径的文件 config/index.js 在其中的dev对象里面找到:proxyTable: {} 这里就是配置代理的地方,我们进行如下设置: module.exports = { // ... dev: { // 代理配置表,在这里...
  • vue axios 请求跨域

    2020-11-25 17:40:18
    接上篇vue baseUrl多后端环境切换,换成真实的地址后发现接口总是不通,这对这个vue配置还是理解不到位,这回做了波实验终于通透了 请求封装思路 1、将axios后端请求和前端请求分离开 这点是用baseURL做到,前端不...
  • vue3.0配置代理proxy 解决跨域问题
  • 但是proxy的配置无效 <code class="language-javascript">module.exports = { devServer: { port: 8888, proxy: { '/api': { target: 'http://127.0.0.1:9002/', ws: true, ...
  • 这几天在把项目弄好,打包完成后发现之前cli配置的拦截器没有在打包后没起到作用,使用别的方法通过nginx反向代理进行配置跨域。 解决方案 在nginx里面的nginx.config里面配置 配置如下 server { listen 80;#监听...
  • Vue项目,因为前后端分离,所以在请求后端接口时,时常遇到跨站问题,真心入坑啊 1、如果前后端项目部署时候不在同域名下,前端不用配置,后端做好CORS配置即可,后端配置可参考...
  • 这就是因为跨域访问出现的问题 那么为什么会出现跨域问题呢? 因为因为浏览器同源策略的限制,不是同源的脚本不能操作其他源下面的对象 同源策略的概念 同源策略(Same origin policy)是一种约定,它是浏览器最核心...
  • //这是我的配置 dev: { env: require('./dev.env'), port: 8080, autoOpenBrowser: false, assetsSubDirectory: 'static', assetsPublicPath: '/', proxyTable: { '/api': { changeOrigin: true,...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,655
精华内容 662
关键字:

vue配置跨域无效

vue 订阅