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‘: ‘XMLHttpRequest‘,
        ‘Content-Type‘: ‘application/json‘
      }
    }).then(
      (response) => {
        return response
      }
    )
    )
  }

在调用的时候 先import 这个http 后 this.http.post(url,data) 调用api接口出现跨域问题

一开始我是用的webpack反向代理解决跨域的问题。

打开项目目录下的/config/index.js 找到 proxyTable

proxyTable: {
      ‘/api‘: {
        target: ‘http://192.0.67.65/api‘,
        changeOrigin: true,
        pathRewrite: {
          ‘^/api‘: ‘‘
        }
      }
}

在开发过程中 ok 解决了 跨域的问题。

在 发布 npm run build 部署在本地打开的时候 出现404 错误。

只好然服务的进行处理解决跨域的问题

header(‘Access-Control-Allow-Origin:*‘);//允许所有来源访问
header(‘Access-Control-Allow-Method:POST,GET‘);//允许访问的方式 

此随笔乃本人学习工作记录,如有疑问欢迎在下面评论,转载请标明出处。

如果对您有帮助请动动鼠标右下方给我来个赞,您的支持是我最大的动力。

原文地址:https://www.cnblogs.com/huangenai/p/9734739.html

时间: 2024-10-11 14:12:33

vue webpack配置解决跨域问题的相关文章

vue项目开发,用webpack配置解决跨域问题

今天在本地开发时候碰到了跨域的问题,突然觉着跨域问题在所难免啊,之前没有没有碰到总觉着解决跨域很高大上的样纸,其实就是受限于网络的同源策略,跨域前后端都可以进行处理. 1,后端更改header header('Access-Control-Allow-Origin:*');//允许所有来源访问 header('Access-Control-Allow-Method:POST,GET');//允许访问的方式 2,使用jsonp进行跨域 getData () { var self = this $.

webpack配置解决跨域问题target的配置

注意如果是域名:否则报错 proxy: { '/api': { target: 'http://www.baidu.com/', pathRewrite: {'^/api' : ''}, changeOrigin: true, // target是域名的话,需要这个参数, secure: false, // 设置支持https协议的代理 }, '/api2': { ..... } } 原文地址:https://www.cnblogs.com/wangshengli520/p/10600019.h

vue项目中解决跨域问题axios和

项目如果是用脚手架搭建的(vue cli)项目配置文件里有个proxyTable proxyTable是vue-cli搭建webpack脚手架中的一个微型代理服务器,配置如下 配置和安装axios 安装npm install axios 引用: 参考:https://blog.csdn.net/wh_xmy/article/details/87705840 原文地址:https://www.cnblogs.com/whdaichengxu/p/12340914.html

vue.js vue-jsonp解决跨域问题

安装jsonp npm install vue-jsonp --save main.js中引入 import VueJsonp from 'vue-jsonp' Vue.use(VueJsonp) 组件中基本用法 this.$jsonp('/company/Info',{id:233,name:'zhangsan'}).then(json => { // 返回数据 json, 返回的数据就是json格式 }).catch(err => { console.log(err) }) 原文地址:ht

webpack代理解决跨域问题

new WebpackDevServer(webpack(config), { hot:hot, inline: true, compress: true, //去掉真实ip的检测 disableHostCheck: true, stats: { chunks: false, children: false, colors: true }, historyApiFallback: true, proxy: { '/api/**/*': {//接口开头关键字 *表示全部 target: 'http

配置proxy解决跨域问题

用一个最简单的方法解决API资源请求跨域问题:http-proxy-middleware http-proxy-middleware不需要自己安装,在安装webpack过程中,会自动依赖安装到你的node_modules文件夹下,如果你发现没有,那么请自行安装 npm install --save-dev http-proxy-middleware 1.前端部署了nodejs服务器,采用app.listen()启动前端服务器,那么你只需要在你的js中添加下面几行代码即可 假设你的前端服务器js文

修改浏览器属性配置的作用---开发机上解决跨域的方式

开发阶段解决跨域问题,可以通过修改浏览器属性配置,来关闭浏览器的同源策略保护机制,从而实现解决跨域问题,有下面三种方式:1. MAC系统,终端输入代码段 "open -n /Applications/Google\ Chrome.app/ --args --disable-web-security --user-data-dir=/Users/admin/MyChromeDevUserData/" 2.window系统,cmd输入代码段 "C:\Program Files (

什么是跨域及怎么解决跨域问题?

什么是跨域? 这篇博文解释的挺清楚,我直接引用 https://blog.csdn.net/lambert310/article/details/51683775 跨域,指的是浏览器不能执行其他网站的脚本.它是由浏览器的同源策略造成的,是浏览器施加的安全限制. 所谓同源是指,域名,协议,端口均相同,只要有一个不同,就是跨域.不明白没关系,举个栗子: http://www.123.com/index.html 调用 http://www.123.com/server.php (非跨域) http:

简单设置,解决使用webpack前后端跨域发送cookie的问题

最近用vue来做项目,用webpack来做前端自动化构建.webpack-dev-server会在本地搭建一个服务器,在和后端调试的时候,就会涉及到跨域的问题. 刚开始时,没有用vue-cli来构建项目,而是参考了github上的vue-vueRouter-webpack来构建.看网上的资料,vue-cli可以通过配置代理来解决跨域的问题: proxyTable: { '/list': { target: 'http://api.xxxxxxxx.com', changeOrigin: true