vue 跨域,本地去掉api前缀配置,和nginx去掉api前缀配置

4 篇文章 1 订阅

1,跨域问题

在 config文件找到index.js,修改 proxyTable

proxyTable: {

      '/api/': { 

     //target: 'http://127.0.0.1:3001',// 设置你调用的接口域名和端口号

    //secure: false, // 如果是https接口,需要配置这个参数

    changeOrigin: true, //是否跨域

      pathRewrite: {

        //'^/api/': '' //将访问路径的/api/替换成’‘,后台服务不用加api了,但前端的请求地址还是要加/api/

       }

   }

},

在 config文件找到dev.env.js,加入以下代码

module.exports = {

NODE_ENV: '"development"',

ADMIN_SERVER: '"/api/"',

}

2.本地去掉后端接口api前缀配置,打开pathRewrite的注释即可

proxyTable: {

      '/api/': { 

     //target: 'http://127.0.0.1:3001',// 设置你调用的接口域名和端口号

    //secure: false, // 如果是https接口,需要配置这个参数

    changeOrigin: true, //是否跨域

      pathRewrite: {

        '^/api/': '' //将访问路径的/api/替换成’‘,后台服务不用加api了,但前端的请求地址还是要加/api/

       }

   }

},

3.nginx去掉api前缀配置

  server {
        listen       8081;    //监听8081端口
        server_name  localhost;
        #charset koi8-r;
        #access_log  logs/host.access.log  main;
        location / {
            root  /Users/xx/project;    //设置根路径
            index  index.html index.html;
        }

     location /api {        //匹配url中带有api的,并转发到http://localhost:8080/api
  rewrite  ^/api/(.*)$ /$1 break;         //利用正则进行匹配#去掉api前缀,$1是正则中的第一串,这样后端的接口也不需要带api了
  proxy_pass http://localhost:8080;      //转发的参数设定
}

另外看到一篇很更详情的博客,链接在下面

https://blog.csdn.net/qq_28352347/article/details/79511128

  • 3
    点赞
  • 14
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要实现Vue前端与Spring Boot后端的跨域通信,可以使用Nginx作为代理服务器来解决跨域问题。以下是一个简单的Nginx代理配置示例: 首先,确保你已经正确安装和配置Nginx。然后,在Nginx配置文件中添加以下内容: ``` http { server { listen 80; server_name example.com; # 静态文件目录 location / { root /path/to/frontend; try_files $uri $uri/ /index.html; } # API代理 location /api/ { proxy_pass http://backend_server; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; } } # 后端服务器配置 upstream backend_server { server backend_server_ip:backend_server_port; } } ``` 在这个示例中,假设前端文件存放在`/path/to/frontend`目录下,后端服务器的IP地址为`backend_server_ip`,端口为`backend_server_port`。 配置中的`location /`指定了前端静态文件的目录,并使用`try_files`指令将所有请求都重定向到`index.html`,以支持前端路由。 配置中的`location /api/`指定了后端API的代理,并通过`proxy_pass`将请求转发到后端服务器。`proxy_set_header`指令用于设置请求头信息,以便后端服务器能够获取到正确的客户端信息。 请根据你的实际情况修改示例中的路径、后端服务器地址和端口,并将上述配置添加Nginx配置文件中。重启Nginx后,Vue前端和Spring Boot后端之间的跨域通信应该可以正常工作了。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值