精华内容
下载资源
问答
  • "http://www.yleyuan.cn/vr4psvr.aspx":"/api" 随后调用接口的时候 直接使用 this.baseurl 即可,如果是开发环境,则会使用 /api ,反之则会使用真实服务器接口 -----------如此就跨域问题就解决了

    1.找到此文件找到

    2.配置文件
    在这里插入图片描述

    '/api': {       
     target: 'https://api.mch.weixin.qq.com',  //服务器地址        
     changeOrigin: true,  //开启代理        
     secure: false, //https的域名则加上这一段
     pathRewrite: {
                 '^/api': ''
                 }    
      }

    3.使用在这里插入图片描述

    到这一步,已经可以正常跨域了,但是打包上线就不行.所以还要继续

    4.在 main.js中配置
    在这里插入图片描述

    // 判断是开发环境还是发布
    Vue.prototype.baseUrl = process.env.NODE_ENV==="production"?"http://www.yleyuan.cn/vr4psvr.aspx":"/api"
    

    随后调用接口的时候
    在这里插入图片描述
    直接使用 this.baseurl 即可,如果是开发环境,则会使用 /api ,反之则会使用真实服务器接口

    -----------如此就跨域问题就解决了

    展开全文
  • 前端axios请求api跨域接口 解决办法: npm start 本地开发环境解决: 在webpack配置文件 /config/index.js 里找到 proxyTable 开启代理 changeOrigin:true, proxyTable: { '/api':{ target:'...

    前端axios请求api跨域接口
    解决办法:

    1. npm start 本地开发环境解决:
      在webpack配置文件 /config/index.js 里找到 proxyTable 开启代理 changeOrigin:true,
    proxyTable: {
          '/api':{
            target:'http://xx.xx.xx.xx:5568',
            changeOrigin:true,
            pathRewrite:{
                '^/api':'/api'
            }
          }
        },
    
    1. npm run build 把 dist 放线上后解决:
      nginx 的 配置文件 xx.conf 的 server {} 里加如下:
    location /api/ {
            # 把 /api 路径下的请求转发给真正的后端服务器
            proxy_pass http://xx.xx.xx.xx:5568;
    
            # 把host头传过去,后端服务程序将收到your.domain.name, 否则收到的是localhost:8080
            proxy_set_header Host $http_host;
    
            # 把cookie中的path部分从/api替换成/service
            proxy_cookie_path /api /;
    
            # 把cookie的path部分从localhost:8080替换成your.domain.name
            proxy_cookie_domain localhost:80 http://xx.xx.xx.xx:5568;
        }
    

    重新启动一下 nginx
    /etc/init.d/nginx reload
    aip跨域访问ok

    参考链接:
    https://www.cnblogs.com/xiangsj/p/8905648.html

    展开全文
  • 调用了外部的api,本地使用proxy,处理了开发环境跨域,但是在生产环境还是报了跨域 devServer: { proxy: { '/api': { target: 'http://www.bing.com', changeOrigin: true, pathRewrite: { "^/api": '

    自己开发了了个人网站
    调用了外部的api,本地使用proxy,处理了开发环境的跨域,但是在生产环境还是报了跨域

        devServer: {
            proxy: {
                '/api': {
                    target: 'http://www.bing.com',
                    changeOrigin: true,
                    pathRewrite: {
                        "^/api": ''
                    }
                },
                '/baidu': {
                    target: 'http://api.map.baidu.com',
                    changeOrigin: true,
                    pathRewrite: {
                        "^/baidu": ''
                    }
                }
            },
        },
    

    我购买的是window云服务器
    使用nginx部署我的网站

        server {
            listen       80;
            server_name  localhost;
    
            location /api/ {
               proxy_pass http://www.bing.com/;
            }
            // 这里为处理跨域请求
            location /baidu/ {
               proxy_pass http://api.map.baidu.com/;
            }
    
            location / {
               root   C:\Users\Administrator\Desktop\build; //这是项目放置的文件路径
               index  index.html index.htm;
            }
            
            error_page   500 502 503 504  /50x.html;
            
            location = /50x.html {
                root   html;
            }
        }
    

    拓展
    如果你想要网站使用History路由模式,不想在后面加上难看的#
    你需要修改Nginx

            location / {
               root   C:\Users\Administrator\Desktop\build;
               index  index.html index.htm;
               try_files $uri $uri/ @rewrites;  //新增
            }
    		//新增
            location @rewrites {
             rewrite ^(.+)$ /index.html last;
            }
    

    个人网站

    www.vczer.com
    
    展开全文
  • vue处理了跨域线上环境如何切换 分享一个vue发布线上路径接口的问题 ! 一般我们在做开发项目的时候在本地去做的时候常常就会遇到跨域 我们要处理跨域如下: proxyTable: { '/api': { target: '...

    vue处理了跨域后线上环境如何切换

    分享一个vue发布线上路径接口的问题 ! 一般我们在做开发项目的时候在本地去做的时候常常就会遇到跨域 我们要处理跨域如下:

    proxyTable: {
          '/api': {
            target: 'https://www.88888.com',
            changeOrigin: true,
            pathRewrite: {
              '^/api':''
            }
        }
     },
    

    这个大家都很熟悉了!

    但是上线的时候出问题了发现我们接口请求的接口都变成了 【当前项目所在路径+接口名称】这样子

    碰到axios.get(’/aa/bb’)请求,因为在aa的前面有个"/",表示根目录的意思,
    所以"/aa/bb"会被解析为hostname+port+“aa/bb”,所以请求地址就为"www.88888.com:8080/aa/bb"

    既然原因找到了!那就开始解决

    开始解决

    (以vue2.0为例)

    1. 找到dev.env.js(本地环境) 和 prod.env.js(生产环境)

    dev.env.js

    'use strict'
    const merge = require('webpack-merge')
    const prodEnv = require('./prod.env')
    
    module.exports = merge(prodEnv, {
      NODE_ENV: '"development"',
      API_HOST: '"本地环境地址"'
    })
    
    

    prod.env.js

    'use strict'
    module.exports = {
      NODE_ENV: '"production"',
      API_ROOT:'"生产环境地址"'
    }
    
    

    2.找到 main.js

    const host = process.env.NODE_ENV === 'development' ? '/api' : process.env.API_ROOT
                     //用来判断当前环境是线上还是线下      //'/api'配置代理转发的名称         //process.env.API_ROOT   取线上生产环境地址
    const instance = axios.create({
      baseURL: host
    })
    Vue.prototype.$http = instance
    

    然后完工 打包发布直接一条龙 隔壁前端妹子直呼内行!

    展开全文
  • 1.前提是部署好了proxy跨域,才能...//如果不为开发环境,则使用以下链接 URL='xxxxxxxxx' }else{ URL='/api' //使用proxy跨域指定的替代 } constservice=axios.create({ baseURL:URL, responseType:'json'...
  • https://www.cnblogs.com/goloving/p/8901189.html 转载于:https://www.cnblogs.com/dianzan/p/11532203.html
  • 前端项目线上如何做跨域

    万次阅读 2019-01-06 15:50:43
    前端页面被跨域限制了,说明不同源。 这个时候可以找一台跟后台接口同源的服务器用 nginx 来做接口转发。 以一个 vue 项目为例,在开发... 而发布到线上去之后,很可能由于 dev 环境下对每一个接口请求都携带了 /ap...
  • vue-cli打包到线上怎么进行跨域设置

    千次阅读 2018-01-23 12:57:24
    vue 在开发环境,涉及跨域,就在本地配置了代理,但是部署到服务器上,就不行了。 解决方法有一下几种 服务器端配置CORS 用nginx反向代理,和访问本地服务器是一样的 可以修改成正式线上的地址,再build 推荐 ...
  • module.exports = { publicPath: './', devServer: { proxy: { ...因为在本地构建成功之后访问的是本地服务器转发远程服务器,如果发布到测试环境需要在nginx中配置对应的转发,即可解决跨域问题
  • axios.interceptors.request.use(configs => {//请求前拦截,vue配置里的跨域只对生产环境有效,生产环境就直接设置baseURL为接口访问地址,path重写自已处理,跨域设置得服务端配置处理 configs.baseURL = process...
  • 利用 线上环境 在 本地 调试代码

    千次阅读 2019-06-11 03:27:48
    为什么需要使用线上环境进行代码调试? 在日常的开发中,当接口文档出来的时候,前后端可以独立的进行开发,前端可以通过一些线上的mock工具模拟接口,调通页面,减少联调的时间。 但是在一些条件下,是需要利用线上...
  • vue区分线上环境和本地开发环境

    千次阅读 2018-12-13 11:06:48
    // 将上文设置的环境变量,赋值到 type 属性上 type: process.env.type } config/index.js dev: { // 反向代理解决跨域 proxyTable: { '/api': { //将http://192.168.1.51:8080/grain印射为/api target: '...
  • 开发环境跨域 1.配置代理 在config -> index.js 页面配置proxyTable,如下: proxyTable: { '/api':{ // 开发坏境下:target 里的地址是你跨域请求的地址 target:'http://baidu.com', chang...
  • // 反向代理解决跨域 proxyTable: { '/api': { //将http://192.168.1.51:8080/grain印射为/api target: 'http://192.168.1.67:8080/dididcarapi',//接口域名 // target: 'http://www.91dadi.com/dididcarapi/',//...
  • 本地开发中因为需要使用代理模式跨域访问本地后台项目的接口,所以请求会多一个前缀“api”如: this.axios.post("/api/test/testTreeNodeByPid",{pid:0}) 在npm run build 编译之后的js也会带这个前缀,一开始我...
  • 相关文件 .../config/prod.env.js // 线上打包配置 修改/config下的dev.env.js和prod.env.js这两个文件 dev.env.js 'use strict' const merge = require('webpack-merge') const prodEnv = re...
  • vue本身为运行脚手架项目自家搭载了一个nodejs后台环境,本地可通过proxyTable来处理跨域问题,但是上线(或生产环境)之后改域名真是一件麻烦的事情,所以进行一些配置。 config/index.js proxyTable: { '/apis...
  • vue配置本地和线上环境(域名)

    千次阅读 2019-06-10 11:16:43
    vue本身为运行脚手架项目自家搭载了一个nodejs后台环境,本地可通过proxyTable来处理跨域问题,但是上线(或生产环境)之后改域名真是一件麻烦的事情,所以进行一些配置。 config/index.js proxyTable: { '/...
  • 前后端分离项目中,会遇到跨域问题。...本地开发环境跨域问题用node做代理转发请求server(完美解决开发环境下请求server的跨域问题)。 node代码如下 方法一:request包 "use strict"; const express =...
  • 刚刚在本地测试环境写完项目,目前本地测试是一切顺利,未发现异常,准备打包到生产环境服务器上. 前端React + antd + React-Router + axios 后端Python3.6 + Django1.10.1 脚手架用的是create-react-app所以我们无需...
  • 本猿原来是java后端开发,最近公司和第三方公司有对接做了一个前端项目,由于以前没有接触过vue和node.js,在此记录一下vue跨域中遇到的问题; 开始开发时代码写完,在请求时发现请求第三方接口时报400错误,检查...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 3,976
精华内容 1,590
关键字:

线上环境跨域