当前位置: 首页 > article >正文

vue开发环境,生产环境实现跨域请求使用nginx

1、vue cli2.x (npm run dev运行的项目):

我们可以在config文件夹中找到webpack的配置文件,其中的 index.js 文件中可以找到对应的跨域的配置,详情如下

module.exports = {
  dev: {
    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {
        '/web1': {
            target: 'http://192.1.2.33:5000/api/StudentSourceManage',// 这里是你实际真正请求的地址
            changeOrigin: true,
            pathRewrite: {
                '^/web1': ''// 同上
            }
        },
    },
  },
}

这里用web1(名字可自定义)代替实际的请求地址(写接口的公共部分即可),然后在调用接口的地方用web1代替此地址

2、vue cli3.x(npm run serve运行的项目):

vue cli3中对于webpack的配置文件都是不可见的,但是我们可以自写配置去覆盖它

在项目的根路径下新建个vue.config.js文件,然后在文件中写上跨域的配置即可

module.exports = {
  devServer: {
    proxy: {
      '/web': {
        target: 'http://192.1.2.3:9000', // 对应自己的接口
        changeOrigin: true,
        ws: false,
        pathRewrite: {
          '^/web': '',
        },
      },
    },
  },
};

二、nginx部署vue项目实现解决跨域:

虽然上述配置解决了我们开发环境的跨域问题,但是vue基于打包会删除对应配置,那么打包后上述的配置就不会再起作用,那么我们如何解决呢?可以部署nginx解决此问题

看下nginx的配置文件:

#user  nobody;
worker_processes  1;

events {
    worker_connections  1024;
}


http {
    include       mime.types;
    default_type  application/octet-stream;

    sendfile        on;

    keepalive_timeout  65;


    server {
        listen       8080;
        server_name  10.8.9.94;

        location ^~ /api {
            proxy_pass   http://192.1.2.3:9000;
            add_header Access-Control-Allow-Methods *;
            add_header Access-Control-Max-Age 3600;
            add_header Access-Control-Allow-Credentials true;
            add_header Access-Control-Allow-Origin $http_origin;
            add_header Access-Control-Allow-Headers $http_access_control_request_headers;
            if ($request_method = OPTIONS ) {
                return 200;
            }
        }

        location / {
            root   xiangmu/dist;
            index  index.html index.htm;
            add_header 'Access-Control-Allow-Origin' '*';
            try_files $uri $uri/ /index.html;
        }

        #error_page  404              /404.html;

        # redirect server error pages to the static page /50x.html
        #
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }

}

上述配置文件中,http对象中包括一个server,是用来搭建服务器的,linsten和server_name是你项目要部署的地址和端口号,location后面的/api是为了快速匹配下面的对应地址,proxy_pass是实际要请求的服务器地址,第二个location下面的root指向项目地址,这里是xiangmu文件夹下的dist文件夹,因为我们知道vue项目打包后会生成dist文件夹,文件夹中会有一个index.html文件

配置好文件后,我们把dist文件放到对应位置,然后启动nginx应用程序即可。

然后我们再浏览器中访问我们的部署地址即可。(文中的部署地址是10.8.9.94:8080


http://www.kler.cn/news/360141.html

相关文章:

  • 多IP访问多网段实验
  • Git的原理和使用(四)
  • Redis如何批量删除指定前缀的key
  • 88.【C语言】文件操作(5)
  • php计算经纬度距离 及 某点是否在经纬度节点范围
  • apache flink+starrack+paino 打造流批一体数据仓库
  • 【HeadFirst 设计模式】适配器模式的C++实现
  • XS2123--------IEEE 802.3af 兼容的 PD 和 DC/DC 控制器集成功率 MOSFET V2.0
  • 找不到包的老版本???scikit-learn,numpy,scipy等等!!
  • 【Golang】Go语言web框架Gin响应客户端有哪些方式
  • C++详细笔记(四)
  • 每日OJ题_牛客_集合_排序_C++_Java
  • stable diffusion WEBUI Brief summary
  • 家政小程序搭建,数字化市场发展下的意义
  • RK3588开发笔记-麦克风阵列多pdm通道合并成一个声卡
  • 智能新势力:防爆挂轨巡检机器人助力化工安全
  • 外包干了2个月,技术明显退步
  • Java八股整合(Kafka+RocketMQ+K8S)
  • Redis入门:在Java程序中高效使用Redis
  • 4.流程控制及函数