项目基于Vue前端+Node后台,启动两个服务,请求数据时,端口不一致造成跨域报错:

(No 'Access-Control-Allow-Origin' header is present on the requested resource)

经过查官方API得到以下两种思路:

1、在Node后台中设置,允许访问

1.1、用代码控制

app.all('*', function(req, res, next) {
res.header("Access-Control-Allow-Origin", "http://localhost:8080");
res.header("Access-Control-Allow-Headers", "X-Requested-With");
res.header("Access-Control-Allow-Methods","POST,GET");
res.header("X-Powered-By",' 3.2.1')
res.header("Content-Type", "application/json;charset=utf-8");
next();
});

1.2、安装Core包,例如:

npm install cors --save
const cors = require('cors')
app.use(
cors({
origin: ['http://localhost:8080'], //前端地址
methods: ['GET', 'POST'],
alloweHeaders: ['Conten-Type', 'Authorization']
})
)

 但,若之前遇到后台不是自己开发的接口,而是第三方接口,例如,Google,这样就无法从服务器设置入手。

2、在vue.config.js中进行代理配置:(proxy)

  proxy: { // 配置跨域
'/api': {
target: 'http://localhost:3001/',
ws: true,
changOrigin: true,
pathRewrite: {
'^/api': ''
}
}
},

  在页面调用的时候,用api代替 http://localhost:3001/

  axios.get('api/test/fscontent') //调用了http://localhost:3001/test/fscontent接口
.then(response => {
console.log(response.data)
})

  

【Vue+Node】解决axois请求数据跨域问题的更多相关文章

  1. vue中使用axios进行ajax请求数据(跨域配置)

    npm安装axios npm install axios --save 引入axios import axios from 'axios' 使用axios mounted () { this.getH ...

  2. jQuery解决ajax请求的跨域问题

    这两天工作中频繁的遇到JS的跨域问题,都通过绕开ajax请求的方式.特地百度了一下,把跨域问题解决了.在这分析一下 首先贴上js的页面代码: <html> <head> < ...

  3. 解决ajax请求cors跨域问题

    ”已阻止跨源请求:同源策略禁止读取位于 ***** 的远程资源.(原因:CORS 头缺少 'Access-Control-Allow-Origin').“ ”已阻止跨源请求:同源策略禁止读取位于 ** ...

  4. Mvcapi解决H5请求接口跨域问题

    using Newtonsoft.Json;using System;using System.Collections.Generic;using System.Linq;using System.N ...

  5. Vue proxyTable 解决开发环境的跨域问题

    在 config/index.js 配置文件中,添加 dev: { proxyTable: { '/ssp/withdraw': { target: 'http://dev.home.phiwifi. ...

  6. 解决js获取数据跨域问题,jsonP

    网上说了一些jsonp的示例,感觉都没用,最后研究了一下,调用腾讯的一个api.最后要加output=jsonp&callback=?这个,比较适用. var url = "http ...

  7. 一篇搞定vue请求和跨域

    vue本身不支持发送AJAX请求,需要使用vue-resource.axios等插件实现 axios是一个基本Promise的HTTP请求客户端,用来发送请求,也是vue2.0官方推荐的,同时不再对v ...

  8. Vue的学习总结之---Vue项目 前后端分离模式解决开发环境的跨域问题

    原文:https://blog.csdn.net/localhost_1314/article/details/83623526 在前后端分离的web开发中,我们与后台联调时,会遇到跨域的问题. 比如 ...

  9. node后台fetch请求数据-Hostname/IP doesn't match certificate's altnames解决方法

    一.问题背景 基于express框架,node后台fetch请求数据,报错Hostname/IP doesn't match certificate's altnames..... require(' ...

随机推荐

  1. 计蒜客 奇异家庭 (DP)

    链接 : Here! 思路 : 首先这棵家族树非常非常非常有特点, 家族里的人要么没有孩子, 要么有两个孩子, 所以这棵家族树是一颗满二叉树. 设定状态 $dp[i][j]$ 为 $i$ 个人组成的不 ...

  2. Linux目录与相关配置文件讲解

    linux目录介绍及配置文件详细介绍 重要目录简介 目录名 作用 boot 与电脑启动相关,推荐单独分区. etc 存放配置文件 mnt 一般用来设置挂载点 src.sys.proc 与系统内核相关, ...

  3. Linux系统学习之 二:新手必须掌握的Linux命令2

    2018-10-03 22:20:48 一.文件目录管理命令 1.touch 命令 用于创建空白文件或设置文件的时间,格式为“touch [选项] [文件]”. 参数: -a :仅修改“读取时间(at ...

  4. Java基本排序算法

    转载来自:https://www.jianshu.com/p/5e171281a387 一遍记住Java常用的八种排序算法与代码实现   1.直接插入排序 经常碰到这样一类排序问题:把新的数据插入到已 ...

  5. PHP学习总结(12)——PHP入门篇之变量

    一.什么是变量 变量是用于存储值的,我们命令服务器去干活的时候,往往需要产生一些数据,需要临时性存放起来,方便取用.我们也可以理解为,变量就像一个购物袋,我们可以用来装苹果.榴莲(当然也可以用来装玫瑰 ...

  6. How many integers can you find

    How many integers can you find Time Limit: 12000/5000 MS (Java/Others)    Memory Limit: 65536/32768 ...

  7. 转载 - Pinyin4j的基本用法

    原文:http://blog.csdn.net/pathuang68/article/details/6692882 1.     简单介绍 有时候,需要将汉字编程对应的拼音,以方便数据的处理.比如在 ...

  8. 楼控-西门子-insight使用-软件重新授权

    在insight的使用中,可能会碰到insight的软件授权失败,此时需要重新将原授权删除,再重新将软件授权. 先看一下软件授权失效会出现什么: 再看看如何删除原来的密钥,再注册新的密钥.

  9. S 禁止F12和右键操作控制台,兼容各浏览器

    document.oncontextmenu = function () { return false; };         document.onkeydown = function () {   ...

  10. UVAlive 6560 - The Urge to Merge(状压dp)

    LA 6560 - The Urge to Merge option=com_onlinejudge&Itemid=8&page=show_problem&problem=45 ...