由于开发环境和生产环境的不同,会导致vue访问出现跨域的问题。

一、开发环境跨域问题

1.config/index.js文件配置代理,找到proxyTable字段,如下面一样配置
 

dev: {
    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {
      '/xxx': {
        target: 'http://xxx/api', //访问的接口1
        changeOrigin: true,
        pathRewrite: {
          '^/xxx': '/'
        }
      },
      '/yyy': {
        target: 'http://yyy/api', //访问的接口2
        changeOrigin: true,
        pathRewrite: {
          '^/yyy': '/'
        }
      },
    },

配置好后 访问的url就不用再其他地方带上域名了。这个只适合开发环境使用,因为开发环境的本地服务器,以及做好了代理的功能,无需去多余的操作。

二.生产环境跨域问题

Nginx服务后端配置

        location /api/geocoder/ {
			#limit_conn perip 2;
			#limit_rate 100K;
			add_header 'Access-Control-Allow-Origin' '*';
			#proxy_set_header Host $host;  #这个需要注释,如果不注释会不能访问
			proxy_set_header X-Real-IP $remote_addr;
			proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
			proxy_pass https://api.tianditu.gov.cn/geocoder/;
			client_max_body_size  10M;
		}

以上就是nginx做的配置,需要记住 “/”这个符号很重要 不能少任何一个,认真看好所有“/”的地方,否则会发送错误的请求地址。

简单解释下配置:
当请求地址带有/api/geocoder/的时候,会自动将地址替换成https://api.tianditu.gov.cn/geocoder/来发送请求
举例:
请求地址:http://www.kalec.com/api/geocoder/order/list?page=1(外网请求地址)
经过nginx转发后:https://api.tianditu.gov.cn/geocoder/order/list?page=1(内网请求地址)

GitHub 加速计划 / vu / vue
86
16
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:5 个月前 )
9e887079 [skip ci] 4 个月前
73486cb5 * chore: fix link broken Signed-off-by: snoppy <michaleli@foxmail.com> * Update packages/template-compiler/README.md [skip ci] --------- Signed-off-by: snoppy <michaleli@foxmail.com> Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 7 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐