精华内容
下载资源
问答
  • vue项目打包后跨域
    千次阅读
    2019-11-17 18:56:36

    关于vue的跨域配置,有开发环境的跨域和生产环境的跨域,详见我的另一篇博客:https://blog.csdn.net/qq_40652539/article/details/102877458
    对于上篇文章的生产环境的跨域地址配置,是将所有接口的访问都指向同一个服务器,而对于前后端未完全分离的项目,如果有某个接口需要访问非当前项目的另一台服务器的话,就需要对这个接口单独进行处理了,针对这个问题,我重新梳理了一下关于生产环境下的跨域思路并总结了几种解决方案
    1、使用nginx反向代理(proxy):配置nginx服务并开启服务(可以在nginx中设置对应的url,并设置proxy地址) --> 浏览器访问nginnx的服务地址 --> 当访问到已设置的url时,nginx会去访问proxy的地址,从而进行跨域(这里可能还需要设置一个和后端协商的请求头,如:token,用来让后端核对访问者的身份信息);
    2、通过接口请求后端,由后端请求另一台服务器进行获取数据;
    3、与后端协商请求头,在请求中添加请求头;

    其实我感觉最好的方式是第一种,可以解决所有的跨域问题;
    对于前后端未完全分离的情况,我觉得第二种方法比较好点,毕竟服务与服务之间不存在跨域

    更多相关内容
  • 使用nginx配置反向代理,这样就可以在前端彻底解决跨域问题vue index.js文件源码 'use strict' // Template version: 1.2.7 // see http://vuejs-templates.github.io/webpack for documentation. const path...
  • 在使用vue.js开发前端项目时,再结合webpack搞起各种依赖、各种插件进行开发,无疑给前端开发带来了很多便捷,就在解决跨域这个问题上,相信众多用vue.js的前端同僚们同我一样尝到了甜头,开发环境全靠proxyTable...
  • 2.打包后可以用nginx代理来解决跨域问题。 原理:打包后你在代码中配置的proxyTable不会被打包入dist文件中。所以要找一个外部的插件解决跨域问题。与本地环境下的proxyTable相同,nginx作为前端服务器,它的外部跨域...

    [首先查看是否引入数据库文件,如果没有数据库文件,请求后浏览器显示的是跨域问题!先排除数据库文件有没有引入!]

    1.打包前的本地localhost:8080环境下可以用 proxyTable代理来解决跨域问题。[配置完成后重启项目服务]

    原理:用自定义名如'/api'来代替你请求数据的url地址,proxyTable会自动识别你数据请求url的地址,识别/api字符,然后将/api替换为你想要请求的原网址。

    "首先要确定你的vuecli是2还是3、4"


    vuecli2:

    在config目录的index文件中module.exports 的dev 中加入proxyTable代理。

    module.exports = {
      dev: {
        // Paths
        assetsSubDirectory: 'static',
        assetsPublicPath: '/',
    
        // Various Dev Server settings
        host: 'localhost', // can be overwritten by process.env.HOST
        port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
        autoOpenBrowser: false,
        errorOverlay: true,
        notifyOnErrors: true,
        poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-
    
        proxyTable: {    //下面两个/api可以改成自己定义的名字
          '/api': {
            target: 'http://localhost:9900',  //你的数据请求地址(此处9900为举例)
            secure: true,    //如果是https,加入这句代码
            changeOrigin: true,     //同意跨域
            ws: true,
            pathRewrite: {
              '^/api': '',
            }
          }
        },
      }
    }

    当你用ajax或者axios时就可以将url中的/api变为proxyTable中target的路径,如:

    axios.get({
        url:'/api/wx/mymessage'  //proxyTable将/api变为http://localhost:9900
    }).then(res => {
        console.log(res)
    }).catch(err => {
        console.log(err)
    })

    (若已使用axios.create封装,可以在baseURL前面加入/api),配置完成重新npm run dev


    vuecli3或4:

    在根目录的vue.config.js(没有这个文件可以创建)中加入proxyTable代理。

    
    module.exports ={
    devServer: {
            host: "0.0.0.0",
            port: 8082, 
            https: false, 
            open: true, 
            proxy: {            //下面两个/api可以换成自己定义的名字
               '/api': {
                    target: 'http://localhost:9900',  //你的数据请求地址(此处9900为举例)
                    secure: true,    //如果是https,加入这句代码
                    changeOrigin: true,     //同意跨域
                    ws: true,
                    pathRewrite: {
                          '^/api': '',
                        }
                 }
            }
        },
    }

    当你用ajax或者axios时就可以将url中的/api变为proxyTable中target的路径,如:

    axios.get({
        url:'/api/wx/mymessage'  //proxyTable将/api变为http://localhost:9900
    }).then(res => {
        console.log(res)
    }).catch(err => {
        console.log(err)
    })

    (若已使用axios.create封装,可以在baseURL前面加入/api),配置完成重新npm run start


    到此解决了打包前的跨域问题

    2.打包后可以用nginx代理来解决跨域问题。

    原理:打包后你在代码中配置的proxyTable不会被打包入dist文件中。所以要找一个外部的插件解决跨域问题。与本地环境下的proxyTable相同,nginx作为前端服务器,它的外部跨域插件非常好配置,可以直接下载使用。

    nginx就是为打包的dist文件开启一个本地的localhost地址,配置好nginx后要打开nginx开启的localhost地址来运行打包文件,而不是直接打开dist里面的index文件。

    下载地址:nginx: download

     下载Stable version中的第三个也就是Windows版本就可以了,下载后解压。解压后文件中的exe文件可以直接运行nginx(会弹出一个cmd窗口然后消失,可以打开资源管理器查看服务是否启动)。

    在启动服务之前需要配置conf中的nginx.conf文件(配置完后在任务管理器关掉nginx后重新启动)。

    打包后根据请求地址不同可以分为以下三种情况:

    1、请求数据地址同样为本机开启localhost地址。(一般出现在练习环境下)

    2、请求数据地址为项目甲方未配置代理的内网服务器。(一般出现在项目对接环境下)

    3、请求数据地址为云服务器。【云服务器的商家一般都给自己的接口解决了跨域问题(直接https或者http请求就可以),一般可以直接请求】

    根据1和2情况的不同,nginx也有两种配置方式


    1、请求数据地址同样为本机开启的localhost地址。

    location /api {
             		rewrite ^/api/(.*)$ /$1 break;
             		proxy_pass http://localhost:8020;换成你的后端接口
             	}
    
    
    放一个方便复制的代码段
    
    

     再把源代码url:'http://localhost:9966/this/go'改为url:'/api/this/go'就可以了


    2、请求数据地址为项目甲方未配置代理的内网服务器。(一般出现在项目对接环境下)

     源代码中的请求地址该怎么写就怎么写,此处nginx不起替换作用,只是代理开启服务器。(不用担心这样改动会造成用户也需要配置nginx才能打开网页,这不是你要想的问题,这是服务器需要配置的问题)


    总结:vue产生跨域问题不只是前端问题,这个问题在后端也可以加注释块解决,但是后端解决会产生漏洞,增加网站被黑风险。不要认为这是前端或者后台应该做的工作。

    展开全文
  • 常见的跨域配置(/config/index.js): proxyTable: { '/api': { target: 'http://192.168.2.139:8080/Mobile/Max', // 接口的域名 // secure: false, // 如果是https接口,需要配置这个参数 changeOrigin: true, ...
  • 1、config文件夹下index.js文件设置proxyTable(proxyTable后面的host可以设置也可以保持默认的localhost) proxyTable: { '/api': { ... changeOrigin: true, pathRewrite: { '^/api': '/' } ...host: '自己的I
  • 主要介绍了Vue跨域以及打包部署到nginx跨域设置方法,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
  • vue index.js文件源码'use strict'// Template version: 1.2.7// see http://vuejs-templates.github.io/webpack for documentation.const path = require('path')module.exports = { dev: { // Paths assetsSubD...

    vue index.js文件源码

    'use strict'
    // Template version: 1.2.7
    // see http://vuejs-templates.github.io/webpack for documentation.

    const path = require( 'path')

    module. exports = {
    dev: {

    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    changeOrigin: true,
    proxyTable: {
    '/api' : {
    target: 'https://api.it120.cc/fengyu',
    changeOrigin: true,
    pathRewrite: {
    '^/api' : ''
    }
    },
    '/book' : {
    target: 'http://api.zhuishushenqi.com/',
    changeOrigin: true,
    pathRewrite: {
    '^/book' : ''
    }
    },
    },

    // Various Dev Server settings
    host: 'localhost', // can be overwritten by process.env.HOST
    port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
    autoOpenBrowser: false,
    errorOverlay: true,
    notifyOnErrors: true,
    poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-

    /**
    * Source Maps
    */

    // https://webpack.js.org/configuration/devtool/#development
    devtool: 'eval-source-map',

    // If you have problems debugging vue-files in devtools,
    // set this to false - it *may* help
    // https://vue-loader.vuejs.org/en/options.html#cachebusting
    cacheBusting: true,

    // CSS Sourcemaps off by default because relative paths are "buggy"
    // with this option, according to the CSS-Loader README
    // (https://github.com/webpack/css-loader#sourcemaps)
    // In our experience, they generally work as expected,
    // just be aware of this issue when enabling this option.
    cssSourceMap: false,
    },

    build: {
    // Template for index.html
    index: path. resolve( __dirname, '../dist/index.html'),

    // Paths
    assetsRoot: path. resolve( __dirname, '../dist'),
    assetsSubDirectory: './static',
    assetsPublicPath: './',

    /**
    * Source Maps
    */

    productionSourceMap: true,
    // https://webpack.js.org/configuration/devtool/#production
    devtool: '#source-map',

    // Gzip off by default as many popular static hosts such as
    // Surge or Netlify already gzip all static assets for you.
    // Before setting to `true`, make sure to:
    // npm install --save-dev compression-webpack-plugin
    productionGzip: false,
    productionGzipExtensions: [ 'js', 'css'],

    // Run the build command with an extra argument to
    // View the bundle analyzer report after build finishes:
    // `npm run build --report`
    // Set to `true` or `false` to always turn it on or off
    bundleAnalyzerReport: process. env. npm_config_report
    }
    }


    Nginx 配置文件源码

    #  power by www.php.cn
    #user  nobody;
    worker_processes  1;


    #error_log  logs/error.log;
    #error_log  logs/error.log  notice;
    #error_log  logs/error.log  info;


    #pid        logs/nginx.pid;




    events {
        worker_connections  1024;
    }




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


        #log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
        #                  '$status $body_bytes_sent "$http_referer" '
        #                  '"$http_user_agent" "$http_x_forwarded_for"';


        #access_log  logs/access.log  main;


        sendfile        on;
        #tcp_nopush     on;


        #keepalive_timeout  0;
        keepalive_timeout  65;
        #tcp_nodelay on;
      fastcgi_connect_timeout 300;
      fastcgi_send_timeout 300;
      fastcgi_read_timeout 300;
      fastcgi_buffer_size 128k;
      fastcgi_buffers 4 128k;
      fastcgi_busy_buffers_size 256k;
      fastcgi_temp_file_write_size 256k;


      #gzip  on;
      gzip on;
      gzip_min_length  1k;
      gzip_buffers     4 32k;
      gzip_http_version 1.1;
      gzip_comp_level 2;
      gzip_types       text/plain application/x-javascript text/css application/xml;
      gzip_vary on;
      gzip_disable "MSIE [1-6].";


      server_names_hash_bucket_size 128;
      client_max_body_size     100m; 
      client_header_buffer_size 256k;
      large_client_header_buffers 4 256k;


        server {
            listen       80;
            server_name  localhost;


            #charset koi8-r;


            #access_log  logs/host.access.log  main;
            root    "E:/phpStudy/PHPTutorial/WWW";
            location / {
                index  index.html index.htm index.php l.php;
               autoindex  off;
            }


            #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;
            }


            # proxy the PHP scripts to Apache listening on 127.0.0.1:80
            #
            #location ~ \.php$ {
            #    proxy_pass   http://127.0.0.1;
            #}


            # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
            #
            location ~ \.php(.*)$  {
                fastcgi_pass   127.0.0.1:9000;
                fastcgi_index  index.php;
                fastcgi_split_path_info  ^((?U).+\.php)(/?.+)$;
                fastcgi_param  SCRIPT_FILENAME  $document_root$fastcgi_script_name;
                fastcgi_param  PATH_INFO  $fastcgi_path_info;
                fastcgi_param  PATH_TRANSLATED  $document_root$fastcgi_path_info;
                include        fastcgi_params;
            }


            # deny access to .htaccess files, if Apache's document root
            # concurs with nginx's one
            #
            #location ~ /\.ht {
            #    deny  all;
            #}
    location /api {
    proxy_pass https://api.it120.cc/fengyu;
    }

        }




        # another virtual host using mix of IP-, name-, and port-based configuration
        #
        #server {
        #    listen       8000;
        #    listen       somename:8080;
        #    server_name  somename  alias  another.alias;


        #    location / {
        #        root   html;
        #        index  index.html index.htm;
        #    }
        #}




        # HTTPS server
        #
        #server {
        #    listen       443;
        #    server_name  localhost;


        #    ssl                  on;
        #    ssl_certificate      cert.pem;
        #    ssl_certificate_key  cert.key;


        #    ssl_session_timeout  5m;


        #    ssl_protocols  SSLv2 SSLv3 TLSv1;
        #    ssl_ciphers  HIGH:!aNULL:!MD5;
        #    ssl_prefer_server_ciphers   on;


        #    location / {
        #        root   html;
        #        index  index.html index.htm;
        #    }
        #}


    include vhosts.conf;


    }


    成功截图




    展开全文
  • vue打包部署axios跨域问题

    千次阅读 2020-07-06 23:07:29
    一、本地使用命令运行跨域问题。 外网访问的地址:https://www.runoob.com/try/ajax/json_demo.json 本地springboot接口访问的地址:http://192.168.3.12:8081/register/getSmsCode/123456789 1、axios访问的代码: ...

    工具版本:
    【vue -V】:2.9.6
    ide工具:VSCode / Idea

    前提:我们前端vue工程需要单独部署

    一、本地使用命令运行跨域问题。
    外网访问的地址:https://www.runoob.com/try/ajax/json_demo.json
    本地springboot接口访问的地址:http://192.168.3.12:8081/register/getSmsCode/123456789

    1、axios访问的代码:

    	created(){
    		  const _this = this
    		  this.$axios
    		  .get('/try/ajax/json_demo.json')
    		  .then(response => (
    			console.log('请求成功'),
    			console.log(response),
    			_this.msg = response.data
    
    			))
    		  .catch(function (error) { // 请求失败处理
    			console.log(error);
    		  });
    
    		  //发送本地springboot请求,本机的地址:192.168.3.12
    		  this.$axios
    		  .get('/register/getSmsCode/123456789')
    		  .then(resp => (
    			console.log('请求本地接口OK'),
    			console.log(resp),
    			_this.springStr = resp.data
    
    			))
    		  .catch(function (error) { // 请求失败处理
    			console.log("请求本地接口失败");
    		  });
    	  }
    		
    

    截图如下:
    在这里插入图片描述
    备注:需要在main.js中全局注册

    importaxios from 'axios'
    Vue.prototype.$axios = axios    //全局注册,使用方法为:this.$axios
    

    2、修改assetsPublicPath配置
    配置 config—index.js中的build模块
    将assetsPublicPath: ‘/’, 修改为 assetsPublicPath: ‘./’,
    截图如下:
    在这里插入图片描述
    打包后的index.html路径为下面:

    <script type=text/javascript src=./static/js/vendor.096d28cd4f5da166f9ce.js>
    

    访问地址:http://localhost:8080/
    点击button跳转页面后的地址:http://localhost:8080/#/test

    备注:这个/test是从首页的button跳转过来的 【this.$router.push(’/test’)】

    3、修改proxyTable配置

    		assetsSubDirectory: 'static',
    		assetsPublicPath: '/',
    		proxyTable: {
    		  '/try': {
    			target:'https://www.runoob.com', // 你请求的第三方接口
    			changeOrigin:true, // 在本地会创建一个虚拟服务端,然后发送请求的数据,并同时接收请求的数据,这样服务端和服务端进行数据的交互就不会有跨域问题
    		  },
    		  '/register': {
    			target:'http://192.168.3.12:8081', // 本地的springboot接口
    			changeOrigin:true, //
    		  }
    
    		},
    

    截图如下:
    在这里插入图片描述
    4、测试运行:
    我们通过【npm run dev】启动我们的服务,通过【http://localhost:8080】就可以访问。

    我们本机可以访问,但是在其它的主机上访问拒绝(使用nginx部署不会有这个问题)
    	设置config---index.js中的
    		host: 'localhost', // can be overwritten by process.env.HOST
    	为:
    		host: '0.0.0.0', // can be overwritten by process.env.HOST
    

    备注,使用proxyTable只能解决本地跨域问题。如果部署到nginx就不会

    二、部署到nginx配置。(在window环境中)
    nginx版本:nginx version: nginx/1.19.0
    启动nginx
    直接在cmd中运行 nginx,不报错就启动了。
    【tasklist|findstr “nginx”】可以查看是否启动过
    结束服务【taskkill /f /im nginx.exe】

    打包【npm run build】,生成dist文件夹,将dist里面的文件复制到nginx目录中【.../nginx/html/vue/】
    
    配置nginx.conf文件
    server {
        listen       8888;
        server_name  localhost;
    
        #charset koi8-r;
    
        #access_log  logs/host.access.log  main;
    
        location / {
            root   html;
            index  index.html index.htm;
        }
    
    	location /try {			
    		proxy_pass https://www.runoob.com;	//internet api
    	}
    	
    	location /register {			
    		proxy_pass http://192.168.3.12:8081; // local spring boot api
    	}
    	
    访问地址:【http://localhost:8888/vue/#/】vue就是nginx里面创建的目录
    点击button,可以正常axios请求(外网和本地的springboot接口)
    

    本地的nginx配置如下图:
    在这里插入图片描述
    运行结果如下图:
    在这里插入图片描述

    展开全文
  • Vue打包上线跨域问题处理

    千次阅读 2020-03-11 18:06:25
    由于开发环境和生产环境的不同,会导致vue访问出现跨域问题。 一、开发环境跨域问题 1.config/index.js文件配置代理,找到proxyTable字段,如下面一样配置 dev: { // Paths assetsSubDirectory: 'static', ...
  • 2、问题vue打包后的静态页面和文件直接由nginx代理访问没有问题,但是请求接口时是请求不到的。 3、解决方案: a)配置nginx: server { listen 80; server_name localhost location / { root D:/static; #...
  • 解决vue-cli4跨域问题

    2021-10-14 15:43:20
    1.新建vue.config.js module.exports={ publicPath:"./", //用法和webpack本身的output.publickPath用法一致 devServer: { proxy: { '/api': { //axios要请求的,name target: '...
  • vue项目部署的跨域问题解决

    千次阅读 2022-04-26 09:52:04
    跨域问题在前后端分离项目很常见,至于为什么会跨域,同源策略,百度各种博客都很详细,这里不再介绍,主要记录项目中的各种设置,解决的过程。 首先是后端: 过滤器: @Configuration public class ...
  • VUE打包发布
  • ![图片说明](https://img-ask.csdn.net/upload/202004/03/1585926688_81580.png) 静态资源显示没有问题打包成app 这些接口都不能用了, 跨域。 求大佬在线指导
  • 这几天在把项目弄好,打包完成发现之前cli配置的拦截器没有在打包后没起到作用,使用别的方法通过nginx反向代理进行配置跨域解决方案 在nginx里面的nginx.config里面配置 配置如下 server { listen 80;#监听...
  • vue项目用webpack打包后跨域问题

    千次阅读 2018-03-21 21:32:00
    在app.js的最开始加上 app.all('*', (req, res, next) => { res.header("Access-Control-Allow-Origin", req.headers.origin || '*'); res.header("Access-Control-Allow-Headers", "Content-Type, ...
  • Vue解决跨域问题方案

    千次阅读 2021-03-12 11:41:31
    方案1:使用vue自带配置文件解决跨域问题 (1)这个Vue项目有自带config文件的方式 proxyTable: { '/fh': { target: 'http://localhost:8080/',//设置你调用的接口域名和端口号 别忘了加http changeOrigin: true...
  • IIS上vue打包后接口跨域解决

    千次阅读 2020-06-17 17:01:05
    开发环境:解决跨域通常是在配置文件中使用proxy进行反代理(这个根据具体的vue版本具体配置不同,最好去官网搜索) 生产环境:通常需要使用反代理了(网上搜的) 而我这里本地开发使用的是电脑的iis服务器,经过...
  • 起因在vue文件打包,项目脱离了vue配置的...此时我们可以利用nginx处理跨域,其实vue配置也是利用的这个nginx处理vue打包文件跨域问题安装先在官网下载nginx 注意版本 运行的环境 我这里用的是windows 然后...
  • Vue打包后处理跨域

    2019-05-25 13:52:00
    当我们在自己开发的时候,可能会请求一些网上的接口,但是会遇到一些问题,比如不支持跨域的远程数据接口无法使用,那么要怎么解决呢,先从nginx说起,Nginx(engine x) 是一个高性能的HTTP和反向代理web服务器,它...
  • 主要介绍了关于vue-cli3打包代码白屏的解决方案,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 问题:在本地使用了proxyTable代理可以正常跨域请求后台数据,打包上传就无法获得后台的json文件。查看了相关资料可以用nginx进行解决。还可以使用命名环境变量,请求的时候进行判断,话不多说上干货module....
  • 前端vue打包项目,解决跨域问题

    千次阅读 2019-03-11 15:41:55
    前段时间做一个vue打包成安卓和IOS的App,遇到了跨域问题,直接拿了之前项目的配置,却不起作用。 import org.springframework.context.annotation.Configuration; import org.springframework.web.servlet.config...
  • 主要介绍了解决vue axios跨域 Request Method: OPTIONS问题(预检请求),具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • vue2 跨域问题解决

    2021-07-21 09:52:31
    如果没有config /index.js文件目录,在根目录下建一个vue.config.js 文件 ,有哪个目录就在那个目录下: // vue.config.js 配置说明 //官方vue.config.js 参考文档 ...
  • vue解决跨域方法

    2021-12-23 10:19:20
    什么是跨域 跨域指浏览器不允许当前页面的所在的源去请求另一个源的数据。 源指协议,端口,域名。只要这3个中有一个不同就是跨域。这里列举一个经典的例子: #协议跨域 http://a.baidu.com访问https://a.baidu.com...
  • 解决vue接口跨域问题

    2022-02-23 10:35:48
    首先要在当前文件的根目录下创建一个 vue.config.js 文件 (注意 封装axios) 把下面的代码复制粘贴进去 module.exports = { lintOnSave: false, publicPath: './', devServer: { open: true, //允许跨域 ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 10,433
精华内容 4,173
关键字:

vue解决打包后跨域问题