ToB企服应用市场:ToB评测及商务社交产业平台

标题: vue axios发送post哀求跨域办理 [打印本页]

作者: 兜兜零元 时间: 2024-9-5 08:11
标题: vue axios发送post哀求跨域办理
超过办理有两种方案，后端办理，前端办理。后端办理参考Django跨域办理-CSDN博客
该方法之前试着可以的，但是复制到其他电脑上报错，以是改用前端办理
1、main.js做增长如下配置

import axios from 'axios'
Vue.prototype.$axios = axios
axios.defaults.baseURL = '/api/' //关键代码
axios.defaults.timeout = 5000

复制代码

2、vue.config.js添加如下

module.exports = {
// 输出目录
assetsDir: 'static',
devServer: {
proxy: {
'/api/': {
target:'http://127.0.0.1:8080/', // 你请求的第三方接口
changeOrigin:true, /* 在本地会创建一个虚拟服务端，然后发送请求的数据，
并同时接收请求的数据，这样服务端和服务端进行数据的交互就不会有跨域问题 */
pathRewrite:{ // 路径重写，
/* 替换target中的请求地址 */
'^/api/': ''
}
}
},
}
};

复制代码

原理：
由于我们给url加上了前缀/api/，我们访问/xxx/yyy就当于访问了：/api/xxx/yyy
proxy中拦截了/api/,并把/api及其前面的所有更换成了target中的内容，因此实际访问Url是http://127.0.0.1:8080/xxx/yyy
3、vue中的哀求

axios.post('http://127.0.0.1:8080/login/',this.loginForm).then(res=>{})

复制代码

改成

axios.post('/login/',this.loginForm).then(res=>{})

复制代码

实践发现 npm run serve 从vue前端链接试着办理跨域了
但是npm run build 从django后端地址访问提示路由缺少api

以是要在我的url 都加上前缀api
old urls.py

from django.contrib import admin
from django.urls import path
from django.views.generic import TemplateView
from Myapp.views import *
urlpatterns = [
path('admin/', admin.site.urls),
path('', TemplateView.as_view(template_name='index.html')),
path('login/', login), # 登陆
path('register/', register), # 注册
]

复制代码

修改old urls.py为

from django.contrib import admin
from django.urls import path,include
from django.views.generic import TemplateView
urlpatterns = [
path('admin/', admin.site.urls),
path('', TemplateView.as_view(template_name='index.html')),
path('api/', include('Myapp.urls')),
]

复制代码

在项目下新增urls.py 配置如下

from django.urls import path
from Myapp.views import *
urlpatterns = [
path('login/', login), # 登陆
path('register/', register), # 注册
]

复制代码

项目下urls.py 如下所示

亲测跨域办理

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/)