vue axios发送post哀求跨域办理

超过办理有两种方案，后端办理，前端办理。后端办理参考Django跨域办理-CSDN博客
该方法之前试着可以的，但是复制到其他电脑上报错，以是改用前端办理
1、main.js做增长如下配置

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

复制代码

2、vue.config.js添加如下

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

复制代码

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

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

复制代码

 改成

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

复制代码

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

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

1. from django.contrib import admin
2. from django.urls import path
3. from django.views.generic import TemplateView
4. from Myapp.views import *
6. urlpatterns = [
7.     path('admin/', admin.site.urls),
8.     path('', TemplateView.as_view(template_name='index.html')),
9.     path('login/', login),  # 登陆
10.     path('register/', register),  # 注册
11. ]

复制代码

修改old urls.py为

1. from django.contrib import admin
2. from django.urls import path,include
3. from django.views.generic import TemplateView
5. urlpatterns = [
6.     path('admin/', admin.site.urls),
7.     path('', TemplateView.as_view(template_name='index.html')),
8.     path('api/', include('Myapp.urls')),
9. ]

复制代码

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

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

复制代码

 项目下urls.py 如下所示

亲测跨域办理

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