vue 前端设置允许跨域_[web]记一次sanic+vue跨域问题

这两天在琢磨用sanic配合vue来写一个网站，果然马上就遇到问题了...

Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' he
跨域问题..

话不多说，刚解决，我现在已经累了... 直接进入正题。

1. vue 前端如何处理跨域问题

搜索了很久，发现通过下面的方法可以解决这个前端的问题。
参考文章：https://www.cnblogs.com/s313139232/p/10598071.html

1.在vue.config.js里配置代理，类似于下面这样

module.exports = {runtimeCompiler: true,publicPath: '/', // 设置打包文件相对路径devServer: {// open: process.platform === 'darwin',// host: 'localhost',port: 8071,// open: true, //配置自动启动浏览器proxy: {'/api': {target: 'http://127.0.0.1:8100/', //对应自己的接口changeOrigin: true,ws: true,pathRewrite: {'^/api': ''}}}},
}

main.js 里设置超时和baseurl

axios.defaults.timeout = 5000 // 请求超时
axios.defaults.baseURL = '/api/'  // api 即上面 vue.config.js 中配置的地址

2.后端sanic如何处理跨域

一开始呢，我是设置响应头，像下面这样

return HTTPResponse(status=200,headers={"Access-Control-Allow-Origin": "*",
"Cache-Control": "no-cache"}, body="13")

结果没用

后来想了一下，flask有cors,sanic应该也有，果然发现了sanic_cors

pip install -U sanic_cors #装上
from sanic_cors import CORS  #加入扩展
CORS(app)
# route记得允许options方式，然后就能正常响应了。

好啦，大致就这样，明天继续努力。

继续补充，http跨域时为什么有options请求

在正式请求前，会通过options方式请求来进行一次预检，询问是否在服务器的白名单里，允许之后，才能有接下来的正式通信。

vue 前端设置允许跨域_[web]记一次sanic+vue跨域问题相关推荐

vue 前端设置允许跨域_web 前端的一些小问题
关于vue使用axios post发送json数据跨域请求403的解决方法: 1. 问题 vue开发的时候,使用axios跨域发送请求,同时post发送的数据格式是json格式,发送出去的时候发现控制 ...
vue 前端设置允许跨域_vue——前端跨域
***针对的是不同域名.不同协议的跨域: 1.找到config文件中开发环境的配置文件--dev.env.js,在里面将要跨域的域名配置进去 2.找到config文件中线上环境的配置文件--prod. ...
java 获取 word 窗体域_办公小技巧：巧用窗体域控制Word文档修改区
原标题:办公小技巧:巧用窗体域控制Word文档修改区有时我们发给别人的Word文档,仅仅需要对方修改其中的一小部分,比如房屋出租合同中的房屋承租人信息,采购清单中的数量信息等.这类文档中的其他信息 ...
vue动态设置文字布局方式_十大惊人的文字动画特效
本文阿宝哥将给大家介绍十个「"惊人"」的文字动画效果,希望阿宝哥精心录制的十个 Gif 动画能让大家感到「"惊艳"」,当然更希望这些特效能给大家实现文字动 ...
bootstrap树节点如何设置默认不展开_我开源了一个基于Vue的组织架构树组件
开门见山 Demo 演示地址:http://www.longstudy.club/vue... github 地址:https://github.com/qq44924588... 项目背景因为最近 ...
vue动态设置文字布局方式_详解Vue动态添加模板的几种方法
动态添加模板需要收集原始数据的页面,这个时候我们需要很多原始数据收集模板,下面给大家详解Vue 动态添加模板的几种方法,希望对你学习这方面知识有所帮助. 通常我们会在组件里的 template 属性定 ...
前端设置画布的高度_【后期修图】ps画布设置详解
在图像设计时少不了好的工具,现在当下比较流行的软件属 PS 最好,它的功能强大,是设计者的必备工具之一.在今天的内容中,小编要与大家分享下PS中修改画布大小的实例操作步骤,希望文章对大家以后的工作有所 ...
vue 怎么全局到入常量_午后躺椅上看关于Vue的20点
1.var,const,let的区别首先,必须明确let 与const是ES6 中为了修复var的缺陷引入的,那么var有什么缺陷呢? var 1.var没有块级作用域在JS函数中的var声明,其 ...
vue实现竖式步骤条_手把手教你实现一个 Vue 进度条组件！
最近在个人的项目中,想对页面之间跳转的过程进行优化,想到了很多文档或 npm 等都用到的页面跳转进度条,于是便想自己去实现一个,特此记录. 来看下 npm 搜索组件时候的效果: so 下面咱们一起动手 ...

vue 前端设置允许跨域_[web]记一次sanic+vue跨域问题

这两天在琢磨用sanic配合vue来写一个网站，果然马上就遇到问题了...

话不多说，刚解决，我现在已经累了... 直接进入正题。

1. vue 前端如何处理跨域问题

2.后端sanic如何处理跨域

继续补充，http跨域时为什么有options请求

vue 前端设置允许跨域_[web]记一次sanic+vue跨域问题相关推荐

最新文章

热门文章

vue 前端设置允许跨域_[web]记一次sanic+vue跨域问题

这两天在琢磨用sanic配合vue来写一个网站，果然马上就遇到问题了...

话不多说，刚解决，我现在已经累了... 直接进入正题。

1. vue 前端 如何处理跨域问题

2.后端sanic如何处理跨域

继续补充，http跨域时为什么有options请求

vue 前端设置允许跨域_[web]记一次sanic+vue跨域问题相关推荐

最新文章

热门文章

1. vue 前端如何处理跨域问题