vue-cli配置proxyTable 跨域请求

caoym 发布于2019-08-23 17:00 / 2575人阅读

摘要：本地服务启动端口，项目启动端口，当前端用户提交登录信息到后端，便产生跨域，可以配置解决跨域问题一进入项目下的文件，添加接口的域名如果是接口，需要配置这个参数如果接口跨域，需要进行这个参数配置此处的设为二在前端发送请求页面，设置请求三启动

本地express服务启动端口3000， vue-cli项目启动端口8080，当前端用户提交登录信息到后端，
便产生跨域，可以配置 proxyTable 解决跨域问题
一：进入vue-cli项目下的config/index.js 文件，添加

   proxyTable: {
  "/api": {
    target: "http://xxxxxx.com", // 接口的域名
    // secure: false,  // 如果是https接口，需要配置这个参数
    changeOrigin: true, // 如果接口跨域，需要进行这个参数配置
    pathRewrite: {
      "^/api": ""
    }
  }
},

此处的target 设为 "http://localhost:3000/"

二：在前端发送请求页面，设置请求url

   this.$axios.post("/api/checklogin",{
        username:that.ruleForm.username,
        password:that.ruleForm.password
      })

三启动本地node服务，启动vue项目，发送请求数据，控制台查看，获取数据成功则配置正确

云服务器 GPU云服务器跨域请求跨域请求方式 javascript跨域请求 jquery跨域请求

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/103658.html

vue-cli项目中的proxyTable跨域问题小结

摘要：由两部分组成回调函数和数据。回调函数是当响应到来时应该在页面中调用的函数。回调函数的名字一般是在请求中指定的。动态创建标签，设置其，回调函数在中设置在页面中，返回的作为参数传入回调函数中，我们通过回调函数来来操作数据。什么是跨域？同源策略规定了如果两个 url 的协议、域名、端口中有任何一个不等，就认定它们跨源了。跨域的解决方式有哪几种？ 1.JSONP 是 JSON with ...

lidashuang 2019-08-26 11:40 评论0 收藏0
vue-cli项目中的proxyTable跨域问题小结

摘要：由两部分组成回调函数和数据。回调函数是当响应到来时应该在页面中调用的函数。回调函数的名字一般是在请求中指定的。动态创建标签，设置其，回调函数在中设置在页面中，返回的作为参数传入回调函数中，我们通过回调函数来来操作数据。什么是跨域？同源策略规定了如果两个 url 的协议、域名、端口中有任何一个不等，就认定它们跨源了。跨域的解决方式有哪几种？ 1.JSONP 是 JSON with ...

张金宝 2019-07-25 14:10 评论0 收藏0
vue-cli本地环境API代理设置和解决跨域

摘要：我们将引入我们配置的中，再将修改如下路径你们改下将印射为接口域名如果是接口，需要配置这个参数是否跨域需要的之后不管是生产环境，还是开发环境，都不用再修改我们的请求地址了。前言我们在使用vue-cli启动项目的时候npm run dev便可以启动我们的项目了，通常我们的请求地址是以localhost:8080来请求接口数据的，localhost是没有办法设置cookie的。我们可以...

lakeside 2019-08-20 19:09 评论0 收藏0
简单设置，解决使用webpack前后端跨域发送cookie的问题

摘要：最近用来做项目，用来做前端自动化构建。会在本地搭建一个服务器，在和后端调试的时候，就会涉及到跨域的问题。要向后端发送，前端也需要有相应的配置。另外还要将设为。最近用vue来做项目，用webpack来做前端自动化构建。webpack-dev-server会在本地搭建一个服务器，在和后端调试的时候，就会涉及到跨域的问题。刚开始时，没有用vue-cli来构建项目，而是参考了github上...

wwq0327 2019-08-21 14:25 评论0 收藏0