vue-cli设置proxyTable 跨域

　　跨域问题很常见，至于为什么有跨域就不说了。记录一下在vue-cli中设置跨域这里只需要前端设置，然后就可以进行跨域访问啦

　　在脚手架中 config的文件夹下面有一个index.js 打开找到proxyTable ,发现是一个空对象。这个单词的意思是代理。那么我们可以理解为通过这个代理发出请求，映射到相同的域名端口号下，然后实现跨域的访问。

　　那么怎么设置呢？

 proxyTable: {
        ‘/api/‘:{
            target:‘http://210.16.188.194:8090‘,
            changeOrinin:true,
            pathRewrite:{
                ‘^/api‘:‘‘
            }
        }
    },

　　呐介绍一下怎么用，　

　　target: 写你需要访问的地址比如说我需要访问的接口是这个下面的某个文件，我只需要写到端口号即可

　　changeOrinin:true 照抄就行啦

　　下面的也是照抄即可

　　然后请求访问

　　this.$axios.get(‘api/xxxxxxxxxxxxxxxxx‘).then(data=>{})....

　　需要注意的就是前面要加上api这些。

　　vue-resource同理

时间： 2024-08-12 13:21:57

vue-cli设置proxyTable 跨域的相关文章

vue.js学习之跨域请求代理与axios传参

vue.js学习之跨域请求代理与axios传参一:跨域请求代理 1:打开config/index.js module.exports{ dev: { } } 在这里面找到proxyTable{},改为这样: proxyTable: { '/api': { target: 'http://121.41.130.58:9090',//设置你调用的接口域名和端口号别忘了加http changeOrigin: true, pathRewrite: { '^/api': ''//这里理解成用'/ap

nodejs设置允许跨域

//设置服务器跨域权限app.use(function (req, res, next) { res.header("Access-Control-Allow-Origin", "*"); res.header("Access-Control-Allow-Headers", "X-Requested-With"); res.header("Access-Control-Allow-Methods&q

express设置允许跨域访问该服务.

const express = require('express');const app = express(); //设置允许跨域访问该服务.app.all('*', function (req, res, next) { res.header('Access-Control-Allow-Origin', '*'); //Access-Control-Allow-Headers ,可根据浏览器的F12查看,把对应的粘贴在这里就行 res.header('Access-Control-Allow

asp.net设置允许跨域

String origin = filterContext.HttpContext.Request.Headers["Origin"]; filterContext.HttpContext.Response.AppendHeader("Access-Control-Allow-Origin", "*");//设置允许跨域 filterContext.HttpContext.Response.AppendHeader("Access-Co

vue开发环境配置跨域，一步到位

本文要实现的是:使用vue-cli搭建的项目在开发时配置跨域,上线后不做任何任何修改,接口也可以访问,前端跨域解决方案 production:产品生产环境 development:开发开发环境 1.开发环境设置跨域使用工具:vue-cli自带的配置配置目录 /config/index.js //自行复制黏贴 proxyTable: { '/apis':{ target: 'http://10.1.63.26:19080/', // 后台api changeOrigin: true, //

vue webpack配置解决跨域问题

现在基本项目都是实行前后端分离的原则,不管是ng 或者是vue 在开发中都无法避免跨域的这个问题本人刚上手第一个vue项目,在调用api的时候出现了跨域的这个问题这是封装好一个简单的post 请求 http.js post (url, data) { return axios({ method: 'post', baseURL: '/api', url, data: data, timeout: 10000, headers: { 'X-Requested-With': 'XMLHttpRe

【vue】--代理方式跨域

正向代理与反向代理前端使用代理主要用于跨域请求, 关于跨域:常用的方式 JSONP:利用script标签可跨域的特点,在跨域脚本中可以直接回调当前脚本的函数. CORS:服务器设置HTTP响应头中Access-Control-Allow-Origin值,解除跨域限制但是这两个跨域方案都存在一个致命的缺陷,严重依赖后端的协助, 代理就可以作为前端独立解决跨域的方案正向代理是指一个位于客户端和目标服务器(target server)之间的服务器,为了从目标服务器取得内容,客户端向代理发送

记录：使用springboot的cors和vue的axios进行跨域

一.编写一个配置类,并且注册CorsFilter: 注意允许跨域的域名不要写错 @Configuration public class ZysuyuanCorsConfiguration { @Bean public CorsFilter corsFilter() { // 初始化cors配置对象 CorsConfiguration corsConfiguration = new CorsConfiguration(); // 允许跨域的域名,如果要携带cookie,不能写*,*代表所有域名都可

.net core3.1 webapi + vue.js + axios实现跨域

我所要讲述的是,基于.net core3.1环境下的webapi项目,如何去使用axios对接前端的vue项目既然谈到axios,这里贴出axios的官方文档地址: http://www.axios-js.com/zh-cn/docs/ 首先是前端部分进行设置第一步,在vue项目中安装axios 在vs code的终端中输入命令 npm install axios 稍等片刻,即可完成安装第二步,构建axios的测试api 首先需要在main.js中,引入前面安装的axios 然后在某个组件