vue 跨域和django跨域

1，首先vue跨域我知道两种，一种在config文件下，index.js里面配置跨域：

module.exports = {
  dev: {

    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {
      '/api':{//使用"/api"来代替"http://f.apiplus.c"
        target:'http://127.0.0.1:8000/',//源地址
        changeOrigin:true,//改地址
        pathRewrite:{
          '^/api':''//路由重写
        }
      }
    },
vue 代码：

mounted() {
    this.axios({
        url:'/api/sadmin/show/',    #后端接口
        data:{},
        method:'get'
    }).then((res)=>{
        console.log(res)
        if (res.data.code==200){
            this.alist = res.data.message
        },


2，另一种是在写vue代码时候：直接指定路由：

methods: {
    login(){
        let formdata = new FormData();
        formdata.append('accout',this.accout);
        formdata.append('password',this.password);
        this.axios({
            url:'http://127.0.0.1:8000/api/doctorLogin/',   #指定后端端口号
            method:'post',
            data:formdata

     }).then((res)=>{

        console.log(res)
        }
如果选择第二种 那么就要在django里面进行配置跨域；

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'rest_framework',
    'corsheaders',      # 跨域时注册这一行
    'weblist'
]

还有中间件

MIDDLEWARE = [
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'corsheaders.middleware.CorsMiddleware',     #配置这一行
    'django.middleware.common.CommonMiddleware',
    # 'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',

还有不要忘记在主路由下 加上api

urlpatterns = [
    path('admin/', admin.site.urls),
    path('api/',include('weblist.urls')),   #跨域接口 api
]

这样就可以啦   ！！

vue 跨域 和django跨域

猜你喜欢

vue 跨域和django跨域