当前位置：首页 » 数据仓库 » js前端代理是怎么配置的
扩展阅读
提分平台的账号密码是什么 2023-08-31 22:07:10
webinf下怎么引入js 2023-08-31 21:54:13
堡垒机怎么打开web 2023-08-31 21:54:11

js前端代理是怎么配置的

发布时间: 2022-09-07 11:42:49

1. 通俗易懂讲解vue.config.js的配置参数

贴上 官网
vue-cli3 创建的时候并不会自动创建vue.config.js，因为这个是个可选项，所以一般都是需要修改webpack的时候才会自己创建一个vue.config.js
再然后因为vue-cli3内部高度集成了webpack，一般来说使用者不需要再去知道weboack做了什么，所以没有暴露webpack的配置文件，我们可以手动去创建vue.config.js 去修改默认的webpack。注意，只能叫vue.config.js。

publicPath （从 Vue CLI 3.3 起已弃用baseUrl，请使用publicPath）
参考： https://my.oschina.net/u/4446873/blog/4882847

默认情况下，Vue CLI 会假设你的应用是被部署在一个域名的根路径上，例如 https://www.xxx.com/ 。如果应用被部署在一个子路径上，你就需要用这个选项指定这个子路径。例如，如果你的应用被部署在 https://www.xxx.com/my-app/ ，则设置 publicPath 为 /my-app/。

这个值在开发环境下同样生效。如果你想把 开发服务器架设在根路径 ，你可以使用一个条件式的值：

通常开发环境，本地运行都会直接部署在根路径上，publicPath设置为'/'，访问地址是你的IP地址。如下是设置成'/app'的效果：

从上面可以得知，静态资源文件都是在app下的，所以在dist下新增添一个app目录，把dist下文件放到app下，相当于一个文件的路径，可以发现项目会正常启动。一般nginx都会配置一个静态资源目录，打包后的文件都会放到这个静态资源目录里面，nginx去做映射，所以publicPath这个属性基本不用改。'/'就行。

结论： publicPath配置成'/aaa/bbb/ccc'， 则需在相应的服务器路径中新建aaa>bbb>ccc的文件夹，然后将打包后的文件放进去，就ok啦。

项目中，我会在.env.proction文件中设置一个变量VUE_APP_BASE_URL ，项目打包后告诉相关人员 nginx 路由前缀是什么即可

outputDir

assetsDir

indexPath

filenameHashing

直观效果：当运行npm run build时，
打包后的文件后面都会带一个8位的hash值，那啥是个hash值？

在打包出来的文件名上加上文件内容的hash是目前最常见的有效使用浏览器长缓存的方法，js文件如果有内容更新，hash就会更新，浏览器请求路径变化所以更新缓存，如果js内容不变，hash不变，直接用缓存。（这段话是从别的文章里面参考的）。
将filenameHashing这个值设置为false试试，就不会带那个后缀hash值。

pages

lintOnSave

runtimeCompiler

transpileDependencies

proctionSourceMap

crossorigin （不理解）

integrity

configureWebpack

chainWebpack

Css相关配置

devServer
如果你的前端应用和后端 API 服务器没有运行在同一个主机上，你需要在开发环境下将 API 请求代理到 API 服务器。这个问题可以通过 vue.config.js 中的 devServer.proxy 选项来配置。
补充知识
所谓的跨域就是不同源，不满足协议、域名、端口都相同的约定
http://www.test.com/dir/login.html 同源
https://www.test.com/index.html 不同源 协议不同(https)
http://www.test.com:90/index.html 不同源 端口不同(90)
http://www.demo.com/index.html 不同源 域名不同(demo)
当协议、域名、端口中任意一个不相同时，就是不同源。若不同源之间相互请求资源，就算作跨域
补充知识
反向代理（Reverse Proxy）方式是指以代理服务器来接受网络上的连接请求，然后将请求转发给内部网络上的服务器，并将服务器上得到的结果返回给请求连接的客户端，此时代理服务器对外就表现为一个反向代理服务器。客户端无需做任何配置。
修改config/index.js /vue.config.js文件（改完之后千万记得要重新 npm run dev）

host 将他的值修改为 0.0.0.0，代表可以访问本机所有的IP地址，让vue项目可通过localhost和IP同时访问。

port 设置端口号

open 是否在第一次编译时是自动打开浏览器

hot 开启为true，启动热重载，自动刷新页面

https

inline

overlay

targe 代理的服务器，也就是api要访问的服务器。
changeOrigin 允许跨域， 为false时，请求头中host仍然是浏览器发送过来的host;如果设置成true：发送请求头中host会设置成target的值
ws 是否代理websocket
pathRewrite 重写 url 的 path 部分

此文记录下来，方便自己遗忘的时候能够快速查阅，如有错误请指出。

参考链接：
https://www.jianshu.com/p/b358a91bdf2d
https://www.jb51.net/article/174200.htm
https://blog.csdn.net/liu_yunzhao/article/details/90520028

这篇文章讲的也很详细 https://blog.csdn.net/guozhangqiang/article/details/87197870

2. nginx nodejs反向代理怎么配置

1.安装nodejs，之前就安装了。
2.安装nginx ，我采用的直接源码安装
3.进入 /usr/local/nginx/conf 目录，在该目录下创建include 文件下，我的配置文件就写在这个文件夹里面
4.进入 /usr/local/nginx/conf/include 目录，创建 nginx.node.conf 文件，在里面输入如下代码：

upstream nodejs {
server 127.0.0.1:3000;
#server 127.0.0.1:3001;
keepalive 64;
}

server {
listen 80;
server_name www.penguu.com penguu.com;
access_log /var/log/nginx/test.log;
location / {
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header Host $http_host;
proxy_set_header X-Nginx-Proxy true;
proxy_set_header Connection "";
proxy_pass http://nodejs;

}

}

5.进入/usr/local/nginx/conf ，打开nginx.conf, 在http 里面添加 include /usr/local/nginx/conf/include/*
6.重启nginx , 输入 /usr/local/nginx/sbin/nginx -c /usr/local/nginx/conf/nginx.conf
在浏览器输入penguu.com ok.

3. 如何为thinkjs静态资源配置nginx反向代理

为了让网站静态资源加载更快，所以需要在VPS的nginx上配置一个反向代理来直接让Nginx处理静态资源，动态类的请求通过反向代理让Node.js来处理：
?
server {
listen 80;
server_name abc.com www.abc.com;
index index.js index.html index.htm;
if ($host != 'abc.com' ) {
rewrite ^/(.*)$ http: //abc.com/$1 permanent;
}
root /www/web/myproject/public_html/www;
if ( -f $request_filename/index.html ){
rewrite (.*) $1/index.html break ;
}
if ( !-f $request_filename ){
rewrite (.*) /index.js;
}
location = /index.js {
#proxy_http_version 1.1;
proxy_set_header Connection "" ;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header Host $http_host;
proxy_set_header X-NginX-Proxy true ;
proxy_pass http: //127.0.0.1:8363$request_uri;
proxy_redirect off;
}
location ~ .*\.(js|css|gif|jpg|jpeg|png|bmp|swf|ico|svg|cur|ttf|woff)$ {
expires 1000d;
}
}
如果是你的项目，需要改动如下地方：
server_name abc.com www.abc.com 将abc.com www.abc.com改为项目对应的域名
root /www/web/myproject/public_html/www 配置项目的根目录，一定要到www目录下
proxy_pass http://127.0.0.1:8363$request_uri;将端口6666改为项目里配置的端口

4. 如何解决前端跨域问题

可以使用服务器代理或者在后端设置允许跨域。
现在的项目一般是在后端设置允许跨域，前端在带有允许跨域的情况下，可以像没有跨域一样正常访问。
如果前端单独发布到服务器，也可以在服务器是设置代理，使用代理转发请求。

5. 如何给 NPM 设置代理

npm全称为Node Packaged Moles。它是一个用于管理基于node.js编写的package的命令行工具。其本身就是基于node.js写的,这有点像gem与ruby的关系。

在我们的项目中，需要使用一些基于node.js的javascript库文件，就需要npm对这些依赖库进行方便的管理。由于我们的开发环境由于安全因素在访问一些网站时需要使用代理，其中就包括npm的repositories网站，所以就需要修改npm的配置来加入代理。

下面简要介绍下npm的配置以及如何设置代理。

npm获取配置有6种方式，优先级由高到底。

  • 命令行参数。--proxy http://server:port即将proxy的值设为http://server:port。

  • 环境变量。 以npm_config_为前缀的环境变量将会被认为是npm的配置属性。如设置proxy可以加入这样的环境变量npm_config_proxy=http://server:port。

  • 用户配置文件。可以通过npm config get userconfig查看文件路径。如果是mac系统的话默认路径就是$HOME/.npmrc。

  • 全局配置文件。可以通过npm config get globalconfig查看文件路径。mac系统的默认路径是/usr/local/etc/npmrc。

  • 内置配置文件。安装npm的目录下的npmrc文件。

  • 默认配置。 npm本身有默认配置参数，如果以上5条都没设置，则npm会使用默认配置参数。

    • 针对npm配置的命令行操作

  • npm config set <key> <value> [--global]

  • npm config get <key>

  • npm config delete <key>

  • npm config list

  • npm config edit

  • npm get <key>

  • npm set <key> <value> [--global]

    • 在设置配置属性时属性值默认是被存储于用户配置文件中，如果加上--global，则被存储在全局配置文件中。

    如果要查看npm的所有配置属性（包括默认配置），可以使用npm config ls -l。

    如果要查看npm的各种配置的含义，可以使用npm help config。

    为npm设置代理

  • $ npm config set proxy http://server:port$ npm config set https-proxy http://server:port

    • 如果代理需要认证的话可以这样来设置。

  • $ npm config set proxy http://username:password@server:port$ npm config set https-proxy http://username:pawword@server:port

    • 如果代理不支持https的话需要修改npm存放package的网站地址。

  • $ npm config set registry "http://registry.npmjs.org/"

6. 用eclipse开发前端页面html+js，并与php开发的后端进行交换，请教如何在eclipse上配置环境及服务器

1.貌似js是所有浏览器都支持（可能版本及某些特性的支持不一样），不用专门就此配置环境及服务器（除非你想要支持java）。

2.貌似ajax前端应用的更多些，通常都是ajax发送请求到后端，再根据后端的返回数据进行响应处理，将结果呈现到浏览器。

3.如果后端使用php，那么根据服务器的不同可以选择 wamp / lamp，主要的区别在于服务器一个用的 IIS ，另一个用的 Apache。

搭建PHP环境，通常是 IIS (Apache) + MySQL (或其他数据库)+PHP，你既可以分别下载并安装这三种软件，也可以下载网上提供的打包好的集成安装包。

如果只是想要快速搭建PHP的支持环境，那么，使用集成安装包（如 XAMPP、WampServer等等），使用方便。
而如果想学习和掌握一门技术，那么，手动下载各个部分分别安装配置环境是必不可少的体验。

7. vue.config.js 配置代理不生效

你的代理设置的是/api前缀的就转发到代理服务器上，所以在你的代码发起请求的时候加上api,比如：this.$axios.post('/api/tcCodeSwitchid/getSwitchInfos', ...)

8. 求解答关于Vue.config.js文件的详细配置

这里是创建代理服务器，访问的时候会通过代理服务器转发，所以就不会出现跨域问题。
这里的配置是以"/api"开头的地址，都通过代理访问，其他的地址则不通过代理，后面的是代理地址。

9. apache2.2 反向代理 配置css js静态文件

1.先去掉下面两行的注释

LoadMole proxy_mole
moles/mod_proxy.so

LoadMole proxy_http_mole
moles/mod_proxy_http.so

2.然后在最后增加

ProxyPass /images !
ProxyPass /css !
ProxyPass /js !
ProxyPass / http://localhost:8080/这个也可以写为：

ProxyPass
/oa
http://localhost:8080/oa
ProxyPassReverse
/oa
http://localhost:8080/oa

也可以连续增加以上两行，就是多个tomcat启动

ProxyPass /meb http://192.168.6.103:8081/meb
ProxyPassReverse /meb http://192.168.6.103:8081/meb

10. 求node.js搭建前端web服务器步骤，按网上的教程，安装完node.js就不知道怎么搭建了，都

安装完node.js之后，你可以考虑使用webstorm开发工具创建web项目。
比如创建express项目。自动创建基于express 的web项目。

阅读全文

与js前端代理是怎么配置的相关的内容

本站内容整理源于互联网，如有问题请联系解决。
Copyright design: www.gotrillian.com since 2022