项目基于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. Golang - 处理字符串

    目录 Golang - 处理字符串 1. 字符串操作 2. 字符串转换 Golang - 处理字符串 1. 字符串操作 func Contains(s, substr string) bool 字符串 ...

  2. 1.git的安装和配置

    从git官网下一个git安装包.   点击git.exe安装程序,点击[next]   点击[next]   根据自己的需要可以把需要安装软件全选上,点击[next]   由于这是个人使用所以选择第二 ...

  3. NLP问题特征表达基础 - 语言模型(Language Model)发展演化历程讨论

    1. NLP问题简介 0x1:NLP问题都包括哪些内涵 人们对真实世界的感知被成为感知世界,而人们用语言表达出自己的感知视为文本数据.那么反过来,NLP,或者更精确地表达为文本挖掘,则是从文本数据出发 ...

  4. html绑定点击事件传值

    1.方法1function radioSelect(event){ var valueRadio=event.value; if(valueRadio =='目的口岸'){ return '目的口岸' ...

  5. sass基础教程

    1. 使用变量; $highlight-color: #F90; .selected { border: 1px solid $highlight-color; } //编译后 .selected { ...

  6. 单片机显示原理(LCD1602)

    一.接口 LCD1602是很多单片机爱好者较早接触的字符型液晶显示器,它的主控芯片是HD44780或者其它兼容芯片.与此相仿的是LCD12864液晶显示器,它是一种图形点阵显示器,能显示的内容比LCD ...

  7. BEGINNING SHAREPOINT&#174; 2013 DEVELOPMENT 第1章节--SharePoint 2013 介绍 SharePoint 2013 平台

    BEGINNING SHAREPOINT® 2013 DEVELOPMENT 第1章节--SharePoint 2013 介绍 SharePoint 2013 平台         SharePoin ...

  8. 将Latex tex文档转换成 word文档(上)

    有时候逼不得已,必须得将自己精心排版好的latex 文档 转换成word 给别人编辑 以下提供一个方法 下载 Tex2Word 工具,地址我的网盘 安装 解压后安装,使用默认安装路径 安装过程中.点击 ...

  9. PHP自己定义函数及数组

    个人原创博客:http://www.phpthinking.com/archives/350 一.自己定义函数 自己定义函数就是我们自己定义的函数.在PHP中自己定义函数格式例如以下: 1 funct ...

  10. 再探Linux动态链接 -- 关于动态库的基础知识(Dynamic Linking on Linux Revisited)

      在近一段时间里,由于多次参与相关专业软件Linux运行环境建设,深感有必要将这些知识理一理,供往后参考. 编译时和运行时 纵观程序编译整个过程,细分可分为编译(Compiling,指的是语言到平台 ...