美文网首页
Vue Axios Nginx 配置代理

Vue Axios Nginx 配置代理

作者: 只会ctrl_c_v | 来源:发表于2022-02-11 15:30 被阅读0次

    一、Axios

    #配置下我们访问的Url前缀
    Axios.defaults.baseURL = '/api'
    

    二、Vue - vue.cofig.js 文件配置开发环境代理

    proxy: {
          '/api': {
            target: 'http://domain.name.com', #根据自己情况配置
            changeOrigin: true,
            pathRewrite: {
              "^/api": "/api"
            }
        },
    }
    

    三、Nginx

    server {
            listen 80;
            server_name www.domain.name.com;
            location /{
                root happymall;
                index index.html;
            }    
            location /api {
                proxy_pass http://domain.name.com; #根据自己情况配置
                add_header 'Access-Control-Allow-Credentials' 'true';
                add_header 'Access-Control-Allow-Origin' '*'; 
            }
        }
    

    四、请求Demo

    axios.post("/login").then(res=>{
        console.log(res)
    }).catch(err=>{
        console.log(err)
    })
    这里的请求实际是: `http://domain.name.com/api/login` 
    

    相关文章

      网友评论

          本文标题:Vue Axios Nginx 配置代理

          本文链接:https://www.haomeiwen.com/subject/vtaakrtx.html