Vue Axios Nginx 配置代理

一、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 配置代理)