博客
关于我
vue实现本地解决跨域 nginx实现部署解决跨域
阅读量:609 次
发布时间:2019-03-12

本文共 2678 字,大约阅读时间需要 8 分钟。

这里就不解释什么是跨域了。

跨域是前端最头疼的事情,它阻止了我们向后端请求数据,使之我们无法拿到数据去渲染。

当然,后端可以解决跨域,而且相当简单。但是如果再后端没办法的情况下,前端如果处理这种问题呢?

一:开发环境下(就是vue项目本地开发,没打包部署前)

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应用程序即可。(需要nginx的配置文件,请联系博主

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

好了,以上就解决了我们前端跨域的问题,开发环境和正式部署环境都能解决跨域。

如有问题,请指出,接收批评。

个人微信公众号:

转载地址:http://smwaz.baihongyu.com/

你可能感兴趣的文章
mabatis 中出现< 以及> 代表什么意思?
查看>>
Mac book pro打开docker出现The data couldn’t be read because it is missing
查看>>
MAC M1大数据0-1成神篇-25 hadoop高可用搭建
查看>>
mac mysql 进程_Mac平台下启动MySQL到完全终止MySQL----终端八步走
查看>>
Mac OS 12.0.1 如何安装柯美287打印机驱动,刷卡打印
查看>>
MangoDB4.0版本的安装与配置
查看>>
Manjaro 24.1 “Xahea” 发布!具有 KDE Plasma 6.1.5、GNOME 46 和最新的内核增强功能
查看>>
mapping文件目录生成修改
查看>>
MapReduce程序依赖的jar包
查看>>
mariadb multi-source replication(mariadb多主复制)
查看>>
MariaDB的简单使用
查看>>
MaterialForm对tab页进行隐藏
查看>>
Member var and Static var.
查看>>
memcached高速缓存学习笔记001---memcached介绍和安装以及基本使用
查看>>
memcached高速缓存学习笔记003---利用JAVA程序操作memcached crud操作
查看>>
Memcached:Node.js 高性能缓存解决方案
查看>>
memcache、redis原理对比
查看>>
memset初始化高维数组为-1/0
查看>>
Metasploit CGI网关接口渗透测试实战
查看>>
Metasploit Web服务器渗透测试实战
查看>>