首先egg自身框架没有直接设置允许跨域请求的功能和接口,所以需要第三方包来设置跨域请求!

  • 先安装第三方包来设置跨域,使用egg-cors
// npm
npm i egg-cors --save
// cnpm
cnpm i egg-cors --save
// yarn
yarn add egg-cors
  • 设置egg框架plugin.js文件  目录 ${root}/config/plugin.js
module.exports = {
...
//跨域插件
cors: {
enable: true,
package: 'egg-cors',
},
};
  • 设置egg框架config.default.js  目录${root}/config/config.default.js
...

config.security = {
csrf: {
enable: false,
},
domainWhiteList: [ '*' ],
};
config.cors = {
origin: ctx => ctx.get('origin'), //这种方式是允许所有的IP+端口跨域访问
credentials: true, // 开启认证
allowMethods: 'GET,HEAD,PUT,POST,DELETE,PATCH,OPTIONS', //允许请求的方式
};
  •  若想指定某个地址允许跨域访问则需要单独设置origin即可
 origin: 'http://localhost:3001'

这样你本地的Vue,React 项目就可以请求Egg框架的api了。

import axios from "axios";
const BASEURL = process.env.NODE_ENV === "development" ? "http://127.0.0.1:7001/" : "http://127.0.0.1:7001/" //后端地址
const config = { // `baseURL` 将自动加在 `url` 前面,除非 `url` 是一个绝对 URL。
// 它可以通过设置一个 `baseURL` 便于为 axios 实例的方法传递相对 URL
baseURL: BASEURL, // `headers` 是即将被发送的自定义请求头
headers: { 'X-Requested-With': 'XMLHttpRequest' }, // `timeout` 指定请求超时的毫秒数(0 表示无超时时间)
// 如果请求话费了超过 `timeout` 的时间,请求将被中断
timeout: 60 * 1000, // `withCredentials` 表示跨域请求时是否需要使用凭证
withCredentials: true, // default
} const myAjax = axios.create(config)
export default myAjax

  

Eggjs 设置跨域请求 指定地址跨域 nodejs的更多相关文章

  1. web api 跨域请求,ajax跨域调用webapi

    1.跨域问题仅仅发生在Javascript发起AJAX调用,或者Silverlight发起服务调用时,其根本原因是因为浏览器对于这两种请求,所给予的权限是较低的,通常只允许调用本域中的资源,除非目标服 ...

  2. 【JS跨域请求】Ajax跨域请求JSONP

    前两天被问到ajax跨域如何解决,还真被问住了,光知道有个什么jsonp,迷迷糊糊的没有说上来.抱着有问题必须解决的态度,我看了许多资料,原来如此... 为何一直知道jsonp,但一直迷迷糊糊的不明白 ...

  3. .net cookie跨域请求指定请求域名

    HttpCookie cookie = new HttpCookie("OrderApiCookie"); //初使化并设置Cookie的名称 cookie.HttpOnly = ...

  4. ssm框架如果想要跨域请求,cors跨域

    <!-- 跨域 --> <mvc:cors> <mvc:mapping path="/**"/> </mvc:cors> 在spri ...

  5. Python-flask跨站请求伪造和跨站请求保护的实现

    图中 Browse 是浏览器,WebServerA 是受信任网站/被攻击网站 A,WebServerB 是恶意网站/点击网站 B. (1) 一开始用户打开浏览器,访问受信任网站 A,输入用户名和密码登 ...

  6. springboot跨域请求设置

    当它请求的一个资源是从一个与它本身提供的第一个资源的不同的域名时,一个资源会发起一个跨域HTTP请求(Cross-site HTTP request).比如说,域名A ( http://domaina ...

  7. jQuery jsonp跨域请求

    跨域的安全限制都是对浏览器端来说的,服务器端是不存在跨域安全限制的. 浏览器的同源策略限制从一个源加载的文档或脚本与来自另一个源的资源进行交互. 如果协议,端口和主机对于两个页面是相同的,则两个页面具 ...

  8. Django跨域请求之JSONP和CORS

    现在来新建一个Django项目server01,url配置为 url(r'^getData.html$',views.get_data) 其对应的视图函数为get_data: from django. ...

  9. Jquery 跨域请求JSON数据问题

    制作网站时,我们有时候为了方便快捷会调用别人写好的API接口,或者是调用一些免费的API接口获得JSON数据.比如天气,农历,网站备案信息查询等. 但是,这些API接口都是别人自己服务器上的,我们要调 ...

  10. 使用@CrossOrigin实现跨域请求

    1.毕设使用的是react+java开发的网上书城,大家都知道react主要是视图(表现层或页面),数据的处理还是通过java来实现的,所以我的毕设相当于是两个项目组成的,一个是前端项目,一个是后台项 ...

随机推荐

  1. linux上PGI编译器安装

    1.PGI编译器介绍 随着英伟达的收购,PGI编译器已经已经并入NVIDIA HPC SDK.后面直接安装NVIDIA HPC SDK即可. NVIDIA HPC SDK提供了使用标准的C/C++和F ...

  2. Java面试题:@PostConstruct、init-method和afterPropertiesSet执行顺序?

    在Spring框架中,@PostConstruct注解.init-method属性.以及afterPropertiesSet()方法通常用于初始化Bean的逻辑.它们都提供了在Bean创建和初始化完成 ...

  3. 初识上位机(上):搭建PLC模拟仿真环境

    大家好,我是Edison. 作为一个工业自动化领域的程序员,不懂点PLC和上位机,貌似有点说不过去.这里我用两篇小文带你快速进入上位机开发领域.后续,我会考虑再出一个系列文章一起玩工控上位机. 什么是 ...

  4. 能碳双控| AIRIOT智慧能碳管理解决方案

    在当前全球气候变化和可持续发展的背景下,建设能碳管理平台成为组织迎接挑战.提升可持续性的重要一环,有助于组织实现可持续发展目标,提高社会责任形象,同时适应未来碳排放管理的挑战.能碳管理是一个涉及跟踪. ...

  5. zabbix使用

    安装部署6.0版本 获取仓库 https://www.zabbix.com/cn/download?zabbix=6.0&os_distribution=centos&os_versi ...

  6. WPF自定义FixedColumnGrid布局控件

    按照上一节所讲,我已经对布局系统又所了解.接下来我就实现一个布局控件FixedColumnGrid. 1.基础版 布局控件机制如下,FixedColumnGrid将子控件按照水平排列,每行满两列后换行 ...

  7. vue3组件通信与props

    title: vue3组件通信与props date: 2024/5/31 下午9:00:57 updated: 2024/5/31 下午9:00:57 categories: 前端开发 tags: ...

  8. Pyinstaller打包exe的反编译——LitCTF 2024(公开赛道)ezpython!!!!!

    这个工具折磨了我很久,搭配题目记录一下... 题目 Die 打包工具: PyInstaller 建议下载GitHub的:GitHub - extremecoders-re/pyinstxtractor ...

  9. uniapp 跳转tabbar页面传递参数

    我们这里采用的是本地缓存的方式进行页面的传参 首先看下官方有关本地缓存的介绍 1.设置本地缓存(-- uni.setStorageSync(KEY,DATA) --) 参数 类型 必填 说明 key ...

  10. nmcli 报错

    首先检查你的网卡设备有没有连接,看一下是不是进主机模式 nmcli connection modify ens32 ipv4.addresses 192.168.10.10/24 因为原本就存在网卡配 ...